仅使用CSS定位Firefox

616

使用条件注释，可以使用特定于浏览器的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的“特殊”……

css  firefox  css-hack 
— avdgaag
source
可能想看看一些类似的问题和相关的答案... stackoverflow.com/questions/738831/…–
— AnonJr
3
有什么办法可以在Windows机器和Mac上将firefox作为目标？
— 凯根·坎比
4
<！-[if Gecko]> ... include ... <！[endif]->
— 定义

Answers:

1252

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

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

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

— 爱奥努·G·斯坦
source
17
url-prefix（）在“ @ -moz-document”之后究竟是什么意思？只是好奇。
— 马特
17
@Matt，这是一种过滤应用CSS的网站的方法。另一种选择是使用domain()过滤器。例如，@-moz-document domain(google.com) {...}仅将随附的CSS规则应用于google.com域。
— Ionuț G. Stan
10
我喜欢您不必像为IE一样为此创建一个全新的CSS文档。
— JD Isaacks 2011年
7
@JohnIsaacks IE条件注释不需要单独的样式表。它们可以是内联的。是否要那样做是另一个问题。
— Dylan
4
值得注意的是，此解决方法自2018年3月发布的Firefox 59起不再起作用：bugzilla.mozilla.org/show_bug.cgi?id=1035091
— Jordan Gray
104

更新（来自@Antoine评论）

您可以使用 @supports

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

在这里更多@supports

— Laaposto
source
11
与@ -moz-document url-prefix（）示例相比，这是一个更好的解决方案，它在SCSS解析器中也能很好地发挥作用，而另一个则没有。
— Alastair Hodgson
1
我使用的是Firefox，但仍为白色，是因为使用的是版本吗？
— Antoine
3
@安托万你是对的！它不适用于最新版本的FF。我更新了答案。现在应该可以工作了。谢谢指出！
— laaposto
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]-->
— 瓦卡斯·阿里·汗·普尔
source
66
如果我正确理解这一点，则最上面的不是chrome，而只是指定了对Firefox和IE覆盖的默认行为。
— Muhd 2012年
3
很有用。作为一名前Firefox爱好者，我很生气，我必须像这样进行Firefox特有的黑客攻击，但是只要它可以工作，我就可以忍受。
— SpaceBeers 2012年
如果要将IE检测建议添加到.css文件中，则该建议不起作用。不过，您可以通过这种方式在HTML中包含样式表。如果你想有一个CSS文件IE CSS，我建议看这里keithclark.co.uk/articles/...
— Biepbot冯斯特林
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

— Hbirjand
source
1
您能否详细说明“使用选择器技巧”以及您提供的示例的工作方式？谢谢。
— jj_ 2014年
1
好吧，我自己搞定了：基本上，它的工作是将第二个选择器隐藏在其他不了解第一个选择器的浏览器中。在这种情况下，只有Mozilla能够理解，_:moz-tree-row(hover)因此它将是唯一能够处理.selector{}后续事件的人。目前，这种特定的hacks 可以在所有版本的Firefox上使用，有关更多信息，请查看browserhacks.com。
— jj_ 2014年
1
我使用了Media Query Hack：\ @media屏幕和（-moz-images-in-menus：0）{}这与\ @media屏幕和（-webkit-min-device-pixel-ratio：0）很好地搭配， Visual Studio不会使用它发出警告。
— 丹·伦道夫
1
请注意-moz-images-in-menus：0已在Firefox 52中删除-bugzilla.mozilla.org/show_bug.cgi?id=1302157
— jonathanKingston，
13

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

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

该技巧仅在启用JavaScript并使用Mozilla绑定（XBL）时才有效，该绑定在Firefox和所有其他基于Gecko的产品内部大量使用。作为比较，这类似于IE中的行为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元素的“火狐”级。只需将以下JS替换为以下代码，就有可能：

this.className += " firefox";

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

— 爱奥努·G·斯坦
source
11

使用-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]-->
— 雷贾克斯
source
7

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

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

我通过添加一个default.css包含all common styles and then specific style sheets来覆盖或增强默认值的方法也做了类似的事情。

— 凯可
source
确实有些不错且稳定的方法＆mdash; 谢谢＆mdash; 尽管它仍然取决于浏览器嗅探。我宁愿使用一些取决于功能的东西，例如仅Gecko的CSS规则或其他东西。我确实使用了相同的基本方法：默认样式和特定于浏览器的加载项。
— avdgaag
1
@avdaag：在大多数情况下，功能检测是首选，但是，当您尝试注入黑客以“修复”特定渲染引擎的错误时，从理论上讲，针对用户代理是最佳的解决方案。您不会歧视未知的浏览器；并且user-agent字段应该告诉您浏览器使用的是哪种渲染引擎，因此即使出现了罕见的Gecko浏览器，也仍会提供修复程序。也就是说，由于不适当使用浏览器检测功能，许多浏览器现在都在伪造其用户代理字符串。因此，在实践中它可能效果不佳。
— 冒犯君主
6

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

从我在这里的答案：

你可以用@supports与calc(0s)结合表达@-moz-document，以测试柱花草-壁虎不支持时间值calc()表达式，但柱花草的作用：

@-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的旧版本为目标有点棘手-如果您只对支持@supportsFx 22及更高版本的版本感兴趣，那么您就@supports not (animation: calc(0s))需要：

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

...但是，如果您需要甚至支持较旧的版本，则需要使用层叠，如上面概念验证中所示。

— BoltClock
source
3

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

— 静脉
source
0

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

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

代替使用 

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

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

— 凯拉斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.