使用条件注释很容易针对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来说是“特殊的”……


当前回答

下面的代码倾向于抛出Style lint警告:

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

而不是使用

@-moz-document url-prefix('') {
    h1 {
        color: red;
    }
}

帮了我一把!从这里得到了解决时尚棉绒警告的方法

其他回答

以下是针对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

更新(来自@Antoine comment)

你可以使用@supports

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

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

带有-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;
}

做到这一点的唯一方法是通过各种CSS hack,这将使您的页面更有可能在下一次浏览器更新时失败。如果有的话,它比使用js浏览器嗅探器更不安全。

您的想法的另一种变体是有一个服务器端USER-AGENT检测器,它将找出要附加到页面的样式表。这样你就可以有firefox.css, ie.css, opera.css等等。

你可以在Javascript中完成类似的事情,尽管你可能不认为它是干净的。

我做了类似的事情,有一个default.css,其中包括所有常见的样式,然后添加特定的样式表来覆盖或增强默认值。