使用條件注釋，很容易用瀏覽器特定的CSS規則來定位Internet Explorer:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->有時候是Gecko引擎(Firefox)出了問題。你的CSS規則只針對Firefox，而不是其他瀏覽器，最好的方法是什么？也就是說，不僅Internet Explorer應該忽略Firefox獨有的規則，WebKit和Opera也應該這樣做。
注意:我在尋找一個“干凈”的解決方案。在我看來，使用JavaScript瀏覽器嗅探器將“firefox”類添加到我的HTML并不干凈。我更希望看到依賴于瀏覽器功能的東西，就像條件注釋對IE來說只是“特殊的”
這種解決方案不依賴于JavaScript的開啟。
@-moz-document url-prefix() {
h1 {
color: red;
}
}<h1>This should be red in FF</h1>更新(來自@Antoine評論)
您可以使用@supports
@supports (-moz-appearance:none) {
h1 { color:red; }
}<h1>This should be red in FF</h1>以下是如何應對三種不同的瀏覽器: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]-->這里有一些針對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) {}如果您需要更多信息，請訪問瀏覽器主頁
首先，免責聲明。我并不真的支持我下面提出的解決方案。我寫的唯一一個針對瀏覽器的CSS是針對IE的(尤其是IE6)，盡管我希望不是這樣。
現在，解決方案。你要求它優雅，所以我不知道它有多優雅，但它肯定只會針對壁虎平臺。
這個技巧只有在啟用JavaScript并使用Mozilla bindings (XBL)時才有效，Mozilla bindings在Firefox和所有其他基于Gecko的產品中被大量使用。作為比較，這類似于IE中的行為CSS屬性，但是功能更強大。
我的解決方案涉及三個文件:
ff.html:要設置樣式的文件 ff.xml:包含Gecko綁定的文件 ff.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元素上添加“firefox”類，那就更好了。這是可能的，只要把上面的JS替換成下面的:
this.className += " firefox";該解決方案的靈感來自狄恩·愛德華茲的蚊子行為。
使用特定于引擎的規則可確保有效的瀏覽器定位。
<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 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.css，ie.css，opera.css等。
您可以在Javascript本身中完成類似的事情，盡管您可能不認為它是干凈的。
我也做過類似的事情，創建了一個default.css，其中包含了所有常見的樣式，然后添加了特定的樣式表來覆蓋或增強默認值。
做到這一點的唯一方法是通過各種CSS攻擊，這將使您的頁面在下次瀏覽器更新時更有可能失敗。如果有什么不同的話，它會比使用js瀏覽器嗅探器更不安全。
帶有-moz前綴
div:-moz-read-only {
background: green;
}
textarea:-moz-read-write {
background: green;
}
:-moz-any(div#foo) div.bar {
background: green;
}
li:-moz-first-node, li:-moz-last-node {
background: green;
}可以從JavaScript使用CSS支持。
if (CSS.supports("( -moz-user-select:unset )")) {
console.log("FIREFOX!!!")
}下面的解決方案在更廣泛的Firefox瀏覽器版本中為您提供了不錯的Firefox專用CSS支持...
@supports (-moz-appearance:button) and (contain:paint) {
body {
background: red;
}
}-moz-外觀:早在2006年Mozilla/ Firefox就支持button。但@supports規則直到2019年才被支持，所以這將是最早支持該規則的Firefox瀏覽器。contain in:paint將Safari瀏覽器排除在規則之外。Internet Explorer和早期的Trident Edge瀏覽器不支持@supports，因此也被排除在CSS規則之外。沒有已知的Chrome瀏覽器應該支持-moz-appearance:button，所以排除。
一如既往，我所有的CSS解決方案都是100%無JavaScript的:)
下面的代碼傾向于拋出樣式lint警告:
@-moz-document url-prefix() {
h1 {
color: red;
}
}而不是使用
@-moz-document url-prefix('') {
h1 {
color: red;
}
}幫了我一把！從此處獲得樣式線頭警告的解決方案