仅使用CSS定位Firefox

使用条件注释，可以使用特定于浏览器的CSS规则轻松定位Internet Explorer：

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

有时，行为不当的是Gecko引擎（Firefox）。什么是用CSS规则仅定位Firefox而不定位其他浏览器的最佳方法？也就是说，Internet Explorer不仅应忽略仅Firefox的规则，而且WebKit和Opera也应忽略。

注意：我正在寻找一种“干净”的解决方案。在我看来，使用JavaScript浏览器嗅探器向HTML添加“ firefox”类并不符合要求。我希望看到一些依赖于浏览器功能的内容，就像条件注释仅是IE的“特殊” ...

可能想看看一些类似的问题及其相关答案...stackoverflow.com/questions/738831/…

有什么方法可以在Windows机器和Mac上将firefox定位为目标？

<！-[如果壁虎]> ...包括... <！[endif]->

#1 楼

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

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

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

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

url-prefix（）在“ @ -moz-document”之后究竟是什么意思？只是好奇。

–马特
2011年7月13日在16:59

@Matt，这是一种过滤应用CSS的网站的方法。另一种选择是使用domain（）过滤器。例如，@ -moz-document domain（google.com）{...}将仅将随附的CSS规则应用于google.com域。

–艾诺（Ionuț G. Stan）
2011年7月14日在8:48

我喜欢您不必像为IE一样为此创建一个全新的CSS文档。

– JD Isaacks
2011年10月6日13:35

@JohnIsaacks IE条件注释不需要单独的样式表。它们可以是内联的。是否要那样做是另一个问题。

–迪伦
2011年11月18日在22:36

值得注意的是，此解决方法自2018年3月发布的Firefox 59起不再起作用：bugzilla.mozilla.org/show_bug.cgi?id=1035091

–乔丹·格雷
19/12/17在17:16

#2 楼

已更新（来自@Antoine评论）

您可以使用@supports

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

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

更多关于@supports此处

与@ -moz-document url-prefix（）示例相比，这是一个更好的解决方案，它在SCSS解析器中也可以很好地发挥作用，而另一个则没有。

–阿拉斯泰尔·霍奇森（Alastair Hodgson）
15年12月14日在15:40

我正在使用Firefox，但它仍然是白色的，是否是因为我使用的版本？

– Antoine
17年11月28日在18:22

@安托万你是对的！它不适用于最新版本的FF。我更新了答案。现在应该可以工作了。谢谢指出！

–laaposto
17年11月29日在10:24

到目前为止，这是唯一为我工作的人

–哈维尔C. H.
11月13日13:04

#3 楼

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

如果我正确理解这一点，则最上面的不是chrome，而只是指定了对Firefox和IE覆盖的默认行为。

– Muhd
2012年4月3日在22:45

很有用。作为前Firefox爱好者，我很想必须像这样针对Firefox进行特定的黑客攻击，但只要能够运行，我就可以忍受。

–SpaceBeers
2012年5月29日上午9:56

如果要将IE检测建议添加到.css文件中，则该建议不起作用。不过，您可以通过这种方式在HTML中包含样式表。如果要在CSS文件中包含IE CSS，我建议在这里查看：keithclark.co.uk/articles/…

– Biepbot Von Stirling
17-4-6在11:45

#4 楼

这是一些仅针对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);

Media Query Hacks

Firefox 3.6及更高版本将可以使用此功能

@media screen and (-moz-images-in-menus:0) {}

如果需要更多信息，请访问browserhacks

您能否详细说明“使用选择器技巧”以及您提供的示例如何工作？谢谢。

– jj_
2014年11月30日在11:15

好吧，我自己搞定了：基本上，它的工作是将第二个选择器隐藏在其他不了解第一个选择器的浏览器中。在这种情况下，只有Mozilla可以理解_：moz-tree-row（hover），因此它将是唯一能够处理之后的.selector {}的人。目前，这种特定的hacks可以在所有版本的Firefox上运行，有关更多信息，请查看browserhacks.com。

– jj_
2014年11月30日11:31

我使用了Media Query Hack：\ @media屏幕和（-moz-images-in-menus：0）{}这与\ @media屏幕和（-webkit-min-device-pixel-ratio：0）很好地搭配， Visual Studio不会使用它发出警告。

–丹·伦道夫
2015年6月6日在1:50

请注意-moz-images-in-menus：0已在Firefox 52中删除-bugzilla.mozilla.org/show_bug.cgi?id=1302157

–乔纳森·金斯顿
16-10-11在10:53

#5 楼

首先，免责声明。我实际上并不主张我在下面提出的解决方案。我编写的唯一针对浏览器的CSS是针对IE（尤其是IE6）的，尽管我希望不是这种情况。

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

该技巧仅在启用JavaScript并使用Mozilla绑定时才有效（ XBL），在Firefox和所有其他基于Gecko的产品中都大量使用。作为比较，这类似于IE中的行为CSS属性，但是功能更强大。

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

ff.xml：包含Gecko绑定的文件
ff.css：Firefox特定样式

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

h1 {
 color: red;
}

更新：
上述解决方案不是很好。如果不附加一个新的LINK元素，而是在BODY元素上添加“ firefox”类，那就更好了。而且有可能，只需将上面的JS替换为以下内容：

this.className += " firefox";

解决方案的灵感来自Dean Edwards的莫兹行为。

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

#7 楼

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

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

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

That does some like a nice and stable approach — thanks — although it still depends on browser sniffing. I'd rather use something that depends on capability, like a Gecko-only CSS rule or something. I do use the same basic approach: default styles and browser-specific add-ons.

– avdgaag
Jun 4 '09 at 22:13

@avdaag：在大多数情况下，功能检测是首选，但是，当您尝试注入黑客以“修复”特定渲染引擎的错误时，从理论上讲，针对用户代理是最佳的解决方案。您不会歧视未知的浏览器；并且user-agent字段应该告诉您浏览器使用的是哪种渲染引擎，因此即使出现了罕见的Gecko浏览器，也仍会提供修复程序。就是说，由于不适当使用浏览器检测功能，许多浏览器现在都在伪造其用户代理字符串。因此，在实践中它可能效果不佳。

–Lèsemajesté
2011年4月8日在8:33

#8 楼

现在，Firefox Quantum 57对Gecko（称为Stylo或Quantum CSS）进行了实质性的改进，并且有可能突破性的改进，您可能会发现自己必须区分Firefox的旧版本和Firefox Quantum。
从我这里的答案开始：

您可以将带有@supports表达式的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 */
  }
}

... ...但是，如果您需要支持更旧的版本，则需要制作如上面的概念证明所示，使用级联。

#9 楼

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

#10 楼

附带说明，CSS支持已绑定到javascript。

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Mozilla_Extensions

#11 楼

以下代码倾向于引发样式棉绒警告：

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

而不是使用

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

帮助了我！从这里获得了样式棉绒警告的解决方案

编程黑洞网