仅使用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的“特殊”……
第1897篇《仅使用CSS定位Firefox》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
以下代码倾向于引发样式棉绒警告：
@-moz-document url-prefix() {
h1 {
color: red;
}
}
代替使用
@-moz-document url-prefix('') {
h1 {
color: red;
}
}
帮助了我！从这里获得了样式棉绒警告的解决方案
唯一的方法是通过各种CSS hack，这将使您的页面在下次浏览器更新时更可能失败。如果有的话，它比使用js浏览器嗅探器安全性低。
您的想法有一个变体，server-side USER-AGENT detector即可以确定要附加到页面的样式表。这样，您可以拥有一个firefox.css, ie.css, opera.css, etc。
您可以在Javascript本身中完成类似的操作，尽管您可能不认为它是干净的。
我通过添加一个default.css包含all common styles and then specific style sheets来覆盖或增强默认值的方法也做了类似的事情。
首先，免责声明。我实际上并不主张我在下面提出的解决方案。我编写的唯一针对浏览器的CSS是针对IE（尤其是IE6）的，尽管我希望并非如此。
现在，解决方案。您要求它优雅，所以我不知道它有多优雅，但可以肯定只针对Gecko平台。
该技巧仅在启用JavaScript并使用Mozilla绑定（XBL）时才有效，该绑定在Firefox和所有其他基于Gecko的产品内部大量使用。作为比较，这类似于IE中的行为CSS属性，但功能更强大。
我的解决方案涉及三个文件：
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的莫兹行为。
更新（来自@Antoine评论）
您可以使用 @supports
@supports (-moz-appearance:none) {
h1 { color:red; }
}<h1>This should be red in FF</h1>在这里更多@supports
好，我找到了。这可能是那里最干净，最简单的解决方案，并且不依赖于打开JavaScript。
@-moz-document url-prefix() {
h1 {
color: red;
}
}<h1>This should be red in FF</h1>它基于Mozilla的另一个CSS扩展。这里有这些CSS扩展的完整列表：Mozilla CSS扩展。
相似问题
问题类别
附带说明，CSS支持已绑定到javascript。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Mozilla_Extensions