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


当前回答

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

其他回答

如何应用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 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浏览器嗅探器更不安全。

此解决方案不依赖于打开JavaScript。

@-moz-document url-prefix() { h1 { 颜色:红色; } } <h1>这应该是FF</h1>中的红色

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

Mozilla CSS扩展。机场当局请注意,它们大多已弃用!

有关这个特定的css扩展的更多信息,请参阅这个问题:@-moz-document url-prefix()做什么?

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

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

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