只针对使用CSS的Firefox

使用条件注释很容易针对Internet Explorer浏览器特定的CSS规则:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

有时是Gecko引擎(Firefox)行为不当。将CSS规则只针对Firefox而不是其他浏览器的最佳方法是什么?也就是说，不仅Internet Explorer应该忽略仅限于firefox的规则，WebKit和Opera也应该忽略。

注:我正在寻找一个“干净”的解决方案。在我看来，使用JavaScript浏览器嗅探器向我的HTML中添加一个“firefox”类并不算干净。我更希望看到一些依赖于浏览器功能的东西，就像条件注释只对IE来说是“特殊的”……

当前回答

以下是针对Firefox浏览器的一些浏览器技巧，

使用选择器hacks。

_:-moz-tree-row(hover), .selector {}

JavaScript黑客

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

媒体查询黑客

这将工作，Firefox 3.6和以后

@media screen and (-moz-images-in-menus:0) {}

如果您需要更多信息，请访问browserhacks

2014-08-20 05:45:25

其他回答

下面是如何处理三种不同的浏览器:IE, 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]-->

2011-01-21 09:33:16

带有-moz前缀

div:-moz-read-only {
  background: green;
}

textarea:-moz-read-write {
  background: green;
}

:-moz-any(div#foo) div.bar {
  background: green;
}

li:-moz-first-node, li:-moz-last-node {
  background: green;
}

2021-05-30 16:53:57

更新(来自@Antoine comment)

你可以使用@supports

@supports (-moz-appearance:none) { H1{颜色:红色;｝｝ <h1>这应该是FF</h1>中的红色

更多关于@supports的信息请点击这里

2015-09-08 10:10:55

使用特定于引擎的规则可以确保有效的浏览器定位。

<style type="text/css">

    //Other browsers
    color : black;


    //Webkit (Chrome, Safari)
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        color:green;
    }

    //Firefox
    @media screen and (-moz-images-in-menus:0) {
        color:orange;
    }
</style>

//Internet Explorer
<!--[if IE]>
     <style type='text/css'>
        color:blue;
    </style>
<![endif]-->

2015-01-13 16:57:57