只针对使用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来说是“特殊的”……

当前回答

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

<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

其他回答

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

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

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

2009-06-04 20:26:48

更新(来自@Antoine comment)

你可以使用@supports

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

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

2015-09-08 10:10:55

首先，免责声明。我并不提倡下面的解决方案。我写的唯一针对浏览器的CSS是针对IE(尤其是IE6)的，尽管我希望不是这样。

现在是解决方案。你要求它很优雅，所以我不知道它有多优雅，但它肯定只针对Gecko平台。

这个技巧只有在启用JavaScript并使用Mozilla绑定(XBL)时才有效，Mozilla绑定在Firefox和所有其他基于gecko的产品内部大量使用。作为比较，这类似于IE中的CSS属性，但更强大。

我的解决方案涉及三个文件:

Ff.html:要设置样式的文件 xml:包含Gecko绑定的文件 css: Firefox特定的样式

ff.html

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

ff.xml

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
    <binding id="load-mozilla-css">
        <implementation>
            <constructor>
            <![CDATA[
                var link = document.createElement("link");
                    link.setAttribute("rel", "stylesheet");
                    link.setAttribute("type", "text/css");
                    link.setAttribute("href", "ff.css");

                document.getElementsByTagName("head")[0]
                        .appendChild(link);
            ]]>
            </constructor>
        </implementation>
    </binding>
</bindings>

ff.css