|
|
|
|
|
今天寫(xiě)CSS遇到一個(gè)非常奇怪的事情,就是想hack IE8,于是在樣式里加上“\0”,如下所示:
padding-top:0px\0;
但是一點(diǎn)效果都沒(méi)有,而一直這樣寫(xiě)都是有效的。反而,我用IE7的hack寫(xiě)法,成功了。寫(xiě)法如下:
*padding-top:0px;
檢查起來(lái)是很痛苦很費(fèi)時(shí)的,好在最后找到了原因,原來(lái)是html的head里使用了如下的meta,導(dǎo)致hack IE8無(wú)效。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
其實(shí),這句話是asp.net2.0創(chuàng)建網(wǎng)頁(yè)時(shí)自動(dòng)添加,我一直沒(méi)有過(guò)多研究,以致在新建html網(wǎng)頁(yè)時(shí),也把這些代碼直接拷貝過(guò)去使用,導(dǎo)致出現(xiàn)了現(xiàn)在的問(wèn)題。
理解 IE=EmulateIE7 標(biāo)簽
Windows Internet Explorer 8 引入了文本兼容性模式,該模式允許 Web 開(kāi)發(fā)人員將瀏覽器設(shè)置為以與舊版本相同的方式呈現(xiàn)它們的頁(yè)面??梢愿鶕?jù)不同的頁(yè)面或不同的站點(diǎn)指定兼容性模式。
通過(guò)meta標(biāo)簽,可實(shí)現(xiàn) Windows Internet Explorer 8 支持的一種很常見(jiàn)的文本兼容性模式 — EmulateIE7。寫(xiě)法如下:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
EmulateIE7 是一種瀏覽器兼容模式,EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令確定如何呈現(xiàn)內(nèi)容,EmulateIE7 模式遵循 <!DOCTYPE> 指令。
要為網(wǎng)頁(yè)指定文本模式,請(qǐng)使用 META 元素,以在該網(wǎng)頁(yè)中包含 X-UA-Compatible http-equiv 標(biāo)頭。以下示例指定了 EmulateIE7 模式兼容性。
HTML:
<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<title>我的網(wǎng)頁(yè)</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>
<p>內(nèi)容在此處。</p>
</body>
</html>
Content 屬性指定了該頁(yè)面的模式;例如,要模仿 Windows Internet Explorer 7 的行為,請(qǐng)指定 IE=EmulateIE7。同樣,可指定 IE=5、IE=7 或 IE=8 以選擇其中一種兼容性模式。您還可以指定 IE=edge 以通知 Windows Internet Explorer 8 使用最高級(jí)別的可用模式。
X-UA-compatible 標(biāo)頭不區(qū)分大小寫(xiě);但是,它必須顯示在網(wǎng)頁(yè)中除 TITLE 和其他 META 元素以外的所有元素之前的標(biāo)頭(HEAD 部分)中。
IE=EmulateIE7 標(biāo)簽應(yīng)該摒棄
現(xiàn)在瀏覽器中極少人使用IE7以下的版本了,如果html網(wǎng)頁(yè)里還是用IE=EmulateIE7這樣標(biāo)簽,即是IE8也以IE7的CSS標(biāo)準(zhǔn)來(lái)呈現(xiàn)網(wǎng)頁(yè),而針對(duì)IE8的CSS就不起作用了,這對(duì)CSS的編寫(xiě)和維護(hù)帶來(lái)極大的麻煩。
因此,應(yīng)該摒棄IE=EmulateIE7 標(biāo)簽,在html網(wǎng)頁(yè)里刪除如下mata:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
如果你想兼容IE7瀏覽器,那么可以單獨(dú)hack IE7,CSS的寫(xiě)法是在前面加一個(gè)“*”號(hào),如下所示:
*padding-top:0px;