Question

使用条件注释很容易使用特定于浏览器的CSS规则来定位Internet Explorer：

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

有时候Gecko引擎（Firefox）行为不端。 使用CSS规则而不是单一其他浏览器只能使用Firefox的最佳方法是什么？也就是说，Internet Explorer不仅应该忽略Firefox规则，还应该忽略WebKit和Opera。< / p>

注意：我正在寻找一个“干净”的解决方案。在我看来，使用JavaScript浏览器嗅探器向我的HTML添加“firefox”类并不符合要求。我宁愿看到一些取决于浏览器功能的东西，就像条件评论对IE只有“特殊”......

Answer 1

好的，我找到了。这可能是最干净，最简单的解决方案，不依赖于JavaScript的开启。

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

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

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

Answer 2

以下是如何处理三种不同的浏览器：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]-->

Answer 3

已更新（来自@Antoine评论）

您可以使用@supports

＆＃13;

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}

＆＃13;

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

＆＃13;

有关@supports here

的更多信息

Answer 4

首先，免责声明。我并不是真的提倡我在下面提出的解决方案。我编写的唯一浏览器特定的CSS是针对IE（尤其是IE6），尽管我希望情况并非如此。

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

这个技巧只有在启用JavaScript时才有效，并且使用Mozilla绑定（XBL），这些绑定在Firefox内部和所有其他基于Gecko的产品中大量使用。为了进行比较，这就像IE中的行为CSS属性，但功能更强大。

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

ff.html：要设置样式的文件
ff.xml：包含Gecko绑定的文件
ff.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

h1 {
 color: red;
}

<强>更新上述解决方案并不是那么好。如果不添加新的LINK元素，它会在BODY元素上添加 “firefox”类，这样会更好。并且有可能，只需用以下内容替换上面的JS：

this.className += " firefox";

该解决方案的灵感来自Dean Edwards' moz-behaviors。

Answer 5

以下是一些仅针对Firefox浏览器的浏览器黑客，

使用选择器黑客。

_:-moz-tree-row(hover), .selector {}

JavaScript Hacks

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

Answer 6

使用-engine特定规则可确保有效的浏览器定位。

<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]-->

Answer 7

您的想法的一个变体是拥有一个server-side USER-AGENT detector，可以找出要附加到页面的样式表。这样您就可以拥有firefox.css, ie.css, opera.css, etc。

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

我做了类似的事情，添加default.css all common styles and then specific style sheets以覆盖或增强默认值。

Answer 8

执行此操作的唯一方法是通过各种CSS黑客攻击，这将使您的网页更有可能在下次浏览器更新时失败。如果有的话，它将比使用js浏览器嗅探器更安全。

Answer 9

现在，Firefox Quantum 57对Gecko统称为Stylo或Quantum CSS的改进很大，而且可能会有很大改进，你可能会发现自己处于需要区分Firefox和Firefox Quantum的旧版本的情况。 / p>

从我的回答here：

您可以将@supports与calc(0s)表达式结合使用@-moz-document来测试Stylo - Gecko不支持calc()表达式中的时间值，但Stylo会：< / p>
@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}
这是一个概念验证：
body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}
定位旧版Firefox有点棘手 - 如果您只对支持@supports的版本感兴趣，即Fx 22及以上版本，则@supports not (animation: calc(0s))就是您所需要的：
@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}
...但如果您需要支持更旧的版本，则需要make use of the cascade，如上面的概念验证所示。

Answer 10

以下代码倾向于抛出Style lint警告：

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

改为使用

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

帮帮我了！从here

获得了样式lint警告的解决方案

Answer 11

CSS support具有对javascript的绑定，请注意。

if (CSS.supports("( -moz-user-select:unset )")){
  console.log("FIREFOX!!!")
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

Answer 12

带有 -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定位Firefox

12 个答案:

使用选择器黑客。

JavaScript Hacks

媒体查询黑客