使用条件注释很容易针对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来说是“特殊的”……
当前回答
带有-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;
}
其他回答
更新(来自@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;
}
此解决方案不依赖于打开JavaScript。
@-moz-document url-prefix() { h1 { 颜色:红色; ｝ ｝ <h1>这应该是FF</h1>中的红色
它基于另一个Mozilla特定的css扩展。这里有一个完整的CSS扩展列表:
Mozilla CSS扩展。机场当局请注意，它们大多已弃用!
有关这个特定的css扩展的更多信息，请参阅这个问题:@-moz-document url-prefix()做什么?
如何应用CSS只Firefox
下面的解决方案为您提供了在更广泛的Firefox浏览器版本中仅支持Firefox的CSS…
@supports (-moz-appearance:button) and (contain:paint) {
body {
background: red;
}
}
早在2006年，Mozilla/Firefox就支持-moz-appearance:按钮。但是@supports规则直到2019年才被支持，所以那将是最早支持该规则的Firefox浏览器。include:paint将Safari浏览器排除在规则之外。Internet Explorer和早期的Trident Edge浏览器不支持@supports，因此也被排除在CSS规则之外。没有已知的Chrome浏览器应该支持-moz-appearance:按钮，所以排除。
一如既往，我所有的CSS解决方案都是100% javascript免费:)
下面的代码倾向于抛出Style lint警告:
@-moz-document url-prefix() {
h1 {
color: red;
}
}
而不是使用
@-moz-document url-prefix('') {
h1 {
color: red;
}
}
帮了我一把!从这里得到了解决时尚棉绒警告的方法
