用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有特殊意义一样...。

Shishir Morshed
已编辑的问题 25日 十二月 2015 в 8:13
编程
firefox css css-hack
4日 六月 2009 в 8:19
21 种观点

首先，免责声明。我并不主张采用我下面介绍的解决方案。我写的唯一针对浏览器的CSS是针对IE（尤其是IE6）的，尽管我希望不是这样的。

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

这个技巧只有在启用JavaScript的情况下才会起作用，并且利用Mozilla绑定（XBL），这在Firefox和所有其他基于Gecko的产品中被大量地内部使用。作为比较，这就像IE中的行为CSS属性，但要强大得多。

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

  1. ff.html：要样式化的文件
  2. ff.xml：包含 Gecko 绑定的文件
  3. ff.css。火狐特定的样式

ff.html






body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}




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

ff.xml

<?xml version="1.0"?>

ff.css

h1 {
 color: red;
}

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

this.className += " firefox";

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

Ionuț G. Stan
编辑本段答案4日 六月 2009 в 9:16
评论(0)

你的想法的一个变种是有一个 "服务器端用户代理检测器"，它将找出要附加到页面的样式表。 这样你就可以有一个firefox.css, ie.css, opera.css, 等等。

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

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

Anzil khaN
编辑本段答案16日 三月 2018 в 7:40
评论(2)

唯一的办法是通过各种CSS黑客，这将使你的页面在下次浏览器更新时更容易失败。如果有的话，这将比使用js浏览器嗅探器更不安全。

评论(0)