只针对带有CSS的Firefox

Question

只针对带有CSS的Firefox使用条件注释很容易使用特定于浏览器的CSS规则以InternetExplorer为目标：<!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]-->有时候，是壁虎引擎(Firefox)表现不佳。什么是最好的方法，只针对火狐与你的CSS规则，而不是一个其他浏览器？也就是说，InternetExplorer不仅应该忽略Firefox的规则，而且WebKit和Opera也应该这样做。注：我在找一个“干净”的解决方案。在我看来，使用JavaScript浏览器嗅探器将“Firefox”类添加到我的HTML中并不是那么干净。我更希望看到一些取决于浏览器功能的东西，就像条件注释只是IE…的“特殊”一样。

Answer 1

好吧，我找到了。这可能是最干净、最简单的解决方案，不依赖于打开JavaScript。

@-moz-document url-prefix() {

  h1 {

    color: red;

  }

}

<h1>This should be red in FF</h1>

它基于另一个Mozilla特定的CSS扩展。这里有一个完整的CSS扩展列表：Mozilla CSS扩展.

Answer 2

下面是如何处理三种不同的浏览器：即，FF和Chrome

<style type='text/css'>/*This will work for chrome */#categoryBackNextButtons{
    width:490px;}/*This will work for firefox*/@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }}</style><!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
    width:486px;
}
</style>
<![endif]-->

Answer 3

你可以用@supports

@supports (-moz-appearance:none) {

    h1 { color:red; } 

}

<h1>This should be red in FF</h1>

更多关于@supports 这里