681

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

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

有时，行为不端的是 Gecko 引擎 (Firefox)。使用 CSS 规则仅针对 Firefox 而不是其他单一浏览器的最佳方法是什么？也就是说，不仅 Internet Explorer 应该忽略 Firefox-only 规则，WebKit 和 Opera 也应该。

注意：我正在寻找一个“干净”的解决方案。在我看来，使用 JavaScript 浏览器嗅探器将“firefox”类添加到我的 HTML 中并不符合干净的条件。我宁愿看到一些依赖于浏览器功能的东西，就像条件注释只是 IE 的“特殊”......</p>

4

12 回答 12

1379

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

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>

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

于 2009-06-04T22:43:32.870 回答
151

更新（来自@Antoine 评论）

您可以使用@supports

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>

更多关于@supports 这里

于 2015-09-08T10:10:55.450 回答
83

以下是处理三种不同浏览器的方法：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]-->
于 2011-01-21T09:33:16.040 回答
16

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

使用选择器技巧。

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

JavaScript 黑客

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

于 2014-08-20T05:45:25.210 回答
13

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

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

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

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

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

于 2009-06-04T21:02:08.130 回答
12

使用 -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]-->
于 2015-01-13T16:57:57.597 回答
8

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

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

我通过添加default.css其中包含all common styles and then specific style sheets来覆盖或增强默认值来完成类似的事情。

于 2009-06-04T20:26:48.700 回答
7

既然 Firefox Quantum 57 对 Gecko（统称为 Stylo 或 Quantum CSS）进行了实质性的（并且可能是突破性的）改进，您可能会发现自己必须区分旧版本的 Firefox 和 Firefox Quantum。

从我在这里的回答：

您可以将@supportswith 与calc(0s)表达式结合使用@-moz-document来测试 Stylo — Gecko 不支持calc()表达式中的时间值，但 Stylo 支持：

@-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 */
  }
}

...但是如果您需要支持更旧的版本，则需要使用 cascade，如上面的概念验证所示。

于 2017-12-14T04:11:49.307 回答
3

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

于 2009-06-04T20:22:19.550 回答
2

可以从 JavaScript 使用CSS 支持。

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

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

于 2019-03-16T16:52:45.153 回答
1

以下代码往往会引发 Style lint 警告：

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

而是使用

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

帮我解决了！从这里得到了风格棉绒警告的解决方案

于 2017-11-29T09:46:43.163 回答
1

带-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;
}
于 2021-05-30T16:53:57.617 回答