CSS全面兼容主流瀏覽器的寫法匯總
指定文件兼容性模式
要為你的網(wǎng)頁指定文件模式，需要在你的網(wǎng)頁中使用meta元素放入X-UA-Compatible http-equiv 標(biāo)頭。以下是指定為Emulate IE7 mode 兼容性之范例。
<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
其內(nèi)容隨著指定的頁面模式而更改，當(dāng)要模擬IE7時，指定IE=EmulateIE7，指定IE=5, IE=7, 或IE=8來選擇其中一種兼容性模式。你也可以指定IE=edge來指示IE8使用它支持的最高模式。
X-UA-compatible標(biāo)頭沒有大小寫之分。然而除了title元素及其他的meta元素之外，它必須出現(xiàn)在網(wǎng)頁header節(jié)其它元素之前的位置。
下面的范例顯示該模式設(shè)定為其他值的狀況。
<meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5 mode -->
<!-- This header mimics Internet Explorer 7 and uses
<!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
注意: 前面的范例顯示單獨(dú)的內(nèi)容值。實(shí)際上IE只會執(zhí)行網(wǎng)頁中第一個X-UA-Compatible標(biāo)頭。
你也可以使用內(nèi)容屬性來指定復(fù)數(shù)的文件兼容性模式，這能幫助確保你的網(wǎng)頁在未來的瀏覽器版本都能一致的顯示。欲設(shè)定復(fù)數(shù)的文件模式，請設(shè)定內(nèi)容屬性以判別你想使用的模式。使用分號來分開各個模式。
如果一個特定版本的IE支持所要求的兼容性模式多于一種，將採用列于標(biāo)頭內(nèi)容屬性中最高的可用模式。你可以使用這個特性來排除特定的兼容性模式，雖然并不推薦這樣做。舉例來說，下列標(biāo)頭即會排除IE7 mode。
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
background:#ffc; /* 對firefox有效*/
*background:#ccc; /* 對ie7有效 */
_background:#000; /* 只對ie6有效 */
firefox能解析第一段，后面的兩個因?yàn)榍懊婕恿颂厥夥?#8220;*”和“_”,firefox認(rèn)不了，所以只認(rèn)background:#ffc，看到的是黃色；
ie7前兩段都能認(rèn)，以最后的為準(zhǔn)，所以最后解析是*background:#ccc，看到的是灰色；
ie6前三段都能認(rèn)，而且“_”這個只有ie6能認(rèn)，所以最后解析是_background:#000，看到的是黑色
ps：如果這樣寫還是有問題的話，請查看一下你的html頭，看看<head>之前的內(nèi)容是不是這樣的標(biāo)準(zhǔn)寫法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
CSS中 !important 這個屬性的用法：在CSS的使用中，遇到最多的問題就是不同瀏覽器之間的兼容問題。 由于IE并不嚴(yán)格執(zhí)行W3C標(biāo)準(zhǔn)， 而又幾乎壟斷了瀏覽器市場。 所以作為一名合格的網(wǎng)站制作人員， 必須要針對不同的瀏覽器進(jìn)行微調(diào)。 實(shí)現(xiàn)不同瀏覽器之間兼容的方法有很多， 比如利用JS探測用戶的瀏覽器類型，從而調(diào)用不同的樣式表。 或者就是利用！important 屬性來實(shí)現(xiàn)微調(diào)的效果。 下面是具體的例子。
下面是一段普通的 DIV 代碼：
<div id="a"></div>
下面是有關(guān)層A在CSS樣式表中的定義， 注意，這里使用了！important這個屬性。
#a{margin-left:30px!important; margin-left:20px;}
在上面的例子中， 層a 在IE瀏覽器中， 左邊距為20像素， 而在Firefox中， 左邊距則變?yōu)?0像素。 這是因?yàn)椋?!important在 CSS 中表示優(yōu)先調(diào)用， 由于IE不能夠識別這個屬性， 所以在IE中， 只能夠調(diào)用 “margin-left:20px;" 這個選項， 所以同樣的一段代碼， 在Firefox和IE中就會顯示不同的樣式。不過值得注意的是， 最新版的IE 7.0 已經(jīng)可以識別 !important， 這個屬性了， 但是IE 6.0仍然不能識別。 所以這個小技巧還是相當(dāng)有用的.
.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}
safari是可以解析 html* .e 這樣的寫法的，但是卻不能解析* html .e 這種寫法，所以。先寫html* .e 定好了safari下面的樣式，再寫一段*html .e來定好ie下的樣式就能達(dá)到兼容的效果了。
在CSS布局中，還常常用到IE Hack。if IE起著非常大的作用！
if IE什么意思呢？下面就列舉了一些在CSS常見的HACK控制語句。
作為IE的IF條件注釋使用備忘，大家可以參考，有經(jīng)驗(yàn)歡迎與網(wǎng)友分享。
<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以識別 <![endif]-->
<!--[if IE 5]> 僅IE5.0與IE5.5可以識別 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
在css引入塊中用if 判斷瀏覽器加載不同的css：
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7hack.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6hack.css" />
<![endif]-->
歡迎跟貼補(bǔ)充！
如對本文有疑問，請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答??！ 點(diǎn)擊進(jìn)入論壇
