使用條件注釋，很容易用瀏覽器特定的CSS規(guī)則來(lái)定位Internet Explorer:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->有時(shí)候是Gecko引擎(Firefox)出了問(wèn)題。你的CSS規(guī)則只針對(duì)Firefox，而不是其他瀏覽器，最好的方法是什么？也就是說(shuō)，不僅Internet Explorer應(yīng)該忽略Firefox獨(dú)有的規(guī)則，WebKit和Opera也應(yīng)該這樣做。
注意:我在尋找一個(gè)“干凈”的解決方案。在我看來(lái)，使用JavaScript瀏覽器嗅探器將“firefox”類添加到我的HTML并不干凈。我更希望看到依賴于瀏覽器功能的東西，就像條件注釋對(duì)IE來(lái)說(shuō)只是“特殊的”
這種解決方案不依賴于JavaScript的開(kāi)啟。
@-moz-document url-prefix() {
h1 {
color: red;
}
}<h1>This should be red in FF</h1>更新(來(lái)自@Antoine評(píng)論)
您可以使用@supports
@supports (-moz-appearance:none) {
h1 { color:red; }
}<h1>This should be red in FF</h1>以下是如何應(yīng)對(duì)三種不同的瀏覽器: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]-->這里有一些針對(duì)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) {}如果您需要更多信息，請(qǐng)?jiān)L問(wèn)瀏覽器主頁(yè)
首先，免責(zé)聲明。我并不真的支持我下面提出的解決方案。我寫的唯一一個(gè)針對(duì)瀏覽器的CSS是針對(duì)IE的(尤其是IE6)，盡管我希望不是這樣。
現(xiàn)在，解決方案。你要求它優(yōu)雅，所以我不知道它有多優(yōu)雅，但它肯定只會(huì)針對(duì)壁虎平臺(tái)。
這個(gè)技巧只有在啟用JavaScript并使用Mozilla bindings (XBL)時(shí)才有效，Mozilla bindings在Firefox和所有其他基于Gecko的產(chǎn)品中被大量使用。作為比較，這類似于IE中的行為CSS屬性，但是功能更強(qiáng)大。
我的解決方案涉及三個(gè)文件:
ff.html:要設(shè)置樣式的文件 ff.xml:包含Gecko綁定的文件 ff.css:火狐特有的風(fēng)格 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;
}更新: 上面的解決方案并沒(méi)有那么好。如果不是追加一個(gè)新的LINK元素，而是在BODY元素上添加“firefox”類，那就更好了。這是可能的，只要把上面的JS替換成下面的:
this.className += " firefox";該解決方案的靈感來(lái)自狄恩·愛(ài)德華茲的蚊子行為。
使用特定于引擎的規(guī)則可確保有效的瀏覽器定位。
<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]-->現(xiàn)在Firefox Quantum 57對(duì)Gecko進(jìn)行了實(shí)質(zhì)性的——可能是突破性的——改進(jìn)，統(tǒng)稱為Stylo或Quantum CSS，您可能會(huì)發(fā)現(xiàn)自己處于一種必須區(qū)分Firefox和Firefox Quantum的遺留版本的情況。
從我這里的回答來(lái)看:
您可以將@supports與calc(0s)表達(dá)式和@-moz-document結(jié)合使用來(lái)測(cè)試Stylo — Gecko不支持calc()表達(dá)式中的時(shí)間值，但Stylo支持:
@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
}
}這是一個(gè)概念驗(yàn)證:
body::before {
content: 'Not Fx';
}
@-moz-document url-prefix() {
body::before {
content: 'Fx legacy';
}
@supports (animation: calc(0s)) {
body::before {
content: 'Fx Quantum';
}
}
}您的想法的一個(gè)變體是有一個(gè)服務(wù)器端的用戶代理檢測(cè)器，它將決定將什么樣的樣式表附加到頁(yè)面上。這樣你就可以有一個(gè)firefox.css，ie.css，opera.css等。
您可以在Javascript本身中完成類似的事情，盡管您可能不認(rèn)為它是干凈的。
我也做過(guò)類似的事情，創(chuàng)建了一個(gè)default.css，其中包含了所有常見(jiàn)的樣式，然后添加了特定的樣式表來(lái)覆蓋或增強(qiáng)默認(rèn)值。
做到這一點(diǎn)的唯一方法是通過(guò)各種CSS攻擊，這將使您的頁(yè)面在下次瀏覽器更新時(shí)更有可能失敗。如果有什么不同的話，它會(huì)比使用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瀏覽器版本中為您提供了不錯(cuò)的Firefox專用CSS支持...
@supports (-moz-appearance:button) and (contain:paint) {
body {
background: red;
}
}-moz-外觀:早在2006年Mozilla/ Firefox就支持button。但@supports規(guī)則直到2019年才被支持，所以這將是最早支持該規(guī)則的Firefox瀏覽器。contain in:paint將Safari瀏覽器排除在規(guī)則之外。Internet Explorer和早期的Trident Edge瀏覽器不支持@supports，因此也被排除在CSS規(guī)則之外。沒(méi)有已知的Chrome瀏覽器應(yīng)該支持-moz-appearance:button，所以排除。
一如既往，我所有的CSS解決方案都是100%無(wú)JavaScript的:)
下面的代碼傾向于拋出樣式lint警告:
@-moz-document url-prefix() {
h1 {
color: red;
}
}而不是使用
@-moz-document url-prefix('') {
h1 {
color: red;
}
}幫了我一把！從此處獲得樣式線頭警告的解決方案