只针对Firefox与Firefox
使用条件注释很容易针对Internet浏览器特定的CSS规则：
<!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> 有时它是Gecko引擎（Firefox）的行为不端。 什么是最好的方式来定位只有Firefox与您的CSS规则，而不是一个其他的浏览器？ 也就是说，Internet Explorer不仅应该忽略仅限于Firefox的规则，还应该使用WebKit和Opera。
注意：我正在寻找一个“干净”的解决scheme。 在我看来，使用JavaScript浏览器嗅探器将“firefox”类添加到我的HTML中并不合格。 我宁愿看到一些依赖于浏览器function的东西，就像条件注释对于IE只是“特殊的”一样。
好的，我find了。 这可能是最干净和简单的解决scheme，并不依赖于JavaScript的开启。
<!DOCTYPE html> <html> <head> <style type="text/css"> @-moz-document url-prefix() { h1 { color: red; } } </style> </head> <body> <h1>This should be red in FF</h1> </body> </html>
它基于另一个Mozilla特定的CSS扩展。 这里有这些CSS扩展的完整列表： Mozilla的CSS扩展 。
这里是如何解决三个不同的浏览器：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]-->
首先，一个免责声明。 我并不真正主张我在下面提出的解决scheme。 我写的唯一浏览器特定的CSS是IE（特别是IE6），但我希望不是这样。
现在，解决scheme。 你问它是优雅的，所以我不知道它有多优雅，但它肯定会只针对Gecko平台。
这个技巧只有在启用了JavaScript并且使用Mozilla绑定（ XBL ）的时候才起作用，Mozilla绑定（ XBL ）在Firefox和所有其他基于Gecko的产品内部大量使用。 为了比较，这就像在IE中的CSS属性的行为，但function更强大。
我的解决scheme涉及三个文件：
- ff.html：风格的文件
- ff.xml：包含Gecko绑定的文件
- 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; }
更新：上面的解决scheme不是那么好。 如果不是追加一个新的LINK元素，它会在BODY元素上添加“firefox”类。 而且有可能，只需将上面的JSreplace为以下代码：
this.className += " firefox";
解决scheme的灵感来自于Dean Edwards的moz-behaviour 。
这里是一些浏览器黑客只针对Firefox浏览器，
使用select器黑客。
_:-moz-tree-row(hover), .selector {}
JavaScript黑客
var isFF = !!window.sidebar; var isFF = 'MozAppearance' in document.documentElement.style; var isFF = !!navigator.userAgent.match(/firefox/i);
媒体查询黑客
这是要工作，火狐3.6和以后
@media screen and (-moz-images-in-menus:0) {}
如果您需要更多信息，请访问浏览器
您可以使用另一个解决scheme是：
body:not(:-moz-handler-blocked) h1 { color: red; }
<h1>This should be red in FF</h1>
使用引擎特定的规则可确保有效的浏览器定位。
<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]-->
你的想法的一个变种是有一个服务器端的用户代理探测器，将找出哪些样式表附加到页面。 这样你可以有一个firefox.css，ie.css，opera.css等
你可以在Javascript本身完成类似的事情，虽然你可能不认为它是干净的。
我已经做了一个类似的事情，有一个default.css，其中包括所有常见的样式，然后添加特定的样式表覆盖，或增强默认值。
唯一的方法就是通过各种CSS黑客攻击，这会使你的页面在下次浏览器更新时更容易失败。 如果有的话，它将比使用js浏览器嗅探器更安全。
