僅使用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有「特殊」...

---

#1樓

如下是一些僅針對Firefox瀏覽器的瀏覽器黑客，

使用選擇器黑客。

_:-moz-tree-row(hover), .selector {}

JavaScript Hacks

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

---

#2樓

使用-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]-->

---

#3樓

更新 （來自@Antoine評論）

你能夠使用@supports

@supports (-moz-appearance:none) { h1 { color:red; } }

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

更多關於@supports 信息

---

#4樓

如下代碼傾向於拋出Style lint警告：

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

而是使用

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

幫幫我了！ 從這裏得到了樣式lint警告的解決方案

---

#5樓

如下是如何處理三種不一樣的瀏覽器：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]-->