使用条件注释很容易针对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 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]-->
其他回答
做到这一点的唯一方法是通过各种CSS hack，这将使您的页面更有可能在下一次浏览器更新时失败。如果有的话，它比使用js浏览器嗅探器更不安全。
带有-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;
}
下面是如何处理三种不同的浏览器: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]-->
现在，Firefox Quantum 57已经推出了对Gecko的重大改进(统称Stylo或Quantum CSS)，您可能会发现自己处于必须区分遗留版本的Firefox和Firefox Quantum的情况。
从我的回答来看:
You can use @supports with a calc(0s) expression in conjunction with @-moz-document to test for Stylo — Gecko does not support time values in calc() expressions but Stylo does: @-moz-document url-prefix() { @supports (animation: calc(0s)) { /* Stylo */ } } Here's a proof-of-concept: body::before { content: 'Not Fx'; } @-moz-document url-prefix() { body::before { content: 'Fx legacy'; } @supports (animation: calc(0s)) { body::before { content: 'Fx Quantum'; } } } Targeting legacy versions of Firefox is a little tricky — if you're only interested in versions that support @supports, which is Fx 22 and up, @supports not (animation: calc(0s)) is all you need: @-moz-document url-prefix() { @supports not (animation: calc(0s)) { /* Gecko */ } } ... but if you need to support even older versions, you'll need to make use of the cascade, as demonstrated in the proof-of-concept above.
CSS支持可以从JavaScript中使用。
如果(CSS)。Supports ("(-moz-user-select:unset)")) { console.log(“火狐! !”) ｝
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
