卡卡網(wǎng)

今天用IE11使用卡卡網(wǎng)的網(wǎng)站速度診斷工具時，發(fā)現(xiàn)選項(xiàng)的排版是錯位的，我大吃一驚，因?yàn)樵摴ぞ呱暇€有半年多時間了，開發(fā)時是經(jīng)過了多瀏覽器兼容性測試的，當(dāng)時測試的瀏覽器有IE8、IE9、Chrome、360、Firefox，之所以沒有IE11，是因?yàn)檎J(rèn)為只要通過IE9就可以通過IE11了，但實(shí)際上現(xiàn)在發(fā)現(xiàn)是不行的。

圖一：IE11排版錯位

我于是立即查看源代碼，并調(diào)整寬度，但是我怎么調(diào)整，上圖的排版都沒有變化，很明顯是調(diào)整的寬度沒有生效。

圖二：調(diào)整寬度無效

如上圖中，我修改的寬度是“width”的數(shù)據(jù)，“#width”是為了hack IE7以下的版本，所以沒有修改這個。

我于是“查看元素”（在IE11瀏覽器里，在某個地方點(diǎn)擊右鍵，然后點(diǎn)擊“查看元素”，即可查看該位置的html代碼），看看這幾個選項(xiàng)的css是怎樣的。

圖三：查看元素html代碼

我大吃一驚，這些寬度竟然是圖二中“#width”的寬度。原來，IE11讀的是“#width”的數(shù)據(jù)而不是“width”的數(shù)據(jù)，我hack IE7和IE6的代碼竟然也hack了IE11。

好吧，我把hack IE7和IE6的CSS去掉（現(xiàn)在用這兩瀏覽器的用戶可以忽視了），使用統(tǒng)一的代碼。

圖四：去掉hack IE7和IE6的CSS

在瀏覽網(wǎng)頁，嘿嘿，整齊的排版終于出現(xiàn)了。

圖五：整齊的排版

再“查看元素”的html代碼，如圖：

圖六：查看元素的html代碼

這個正是圖四的css，問題終于得以解決，“#”號原來也會hack IE11 ！

知識擴(kuò)展

IE6\7\8\9\10瀏覽器的CSS hack大全介紹

1、常見的特殊符號的應(yīng)用：

IE6：

_selector{property:value;}
selector{property:value;property:value !important;} /* IE6 不支持同一選擇符中的 !important */

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

總結(jié)起來，如下：

其中，S表示Standards Mode即標(biāo)準(zhǔn)模式，Q表示Quirks Mode，即兼容模式。

（了解更多Quirks模式、Strict(Standars)模式？）

2、條件注釋判斷瀏覽器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>

<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if IE 8]> 僅IE8可識別 <![endif]-->
<!--[if IE 9]> 僅IE9可識別 <![endif]-->

3、meta聲明

由于IE8 可能會將頁面按照 IE7 模式進(jìn)行渲染，針對 多版本IE的現(xiàn)狀，通常會采用設(shè)置 X-UA-Compatible HTTP 頭的方式將頁面在IE中采用統(tǒng)一的渲染模式。

<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" />

4、其他（/*\**/注釋法）

網(wǎng)上也流傳著這樣一種ie hack方法

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA識別*/

.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA識別*/

.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8識別*/

.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8識別*//*“color”和“/*\**/”之間有個空格*/

分析下：

background-color:blue; /*各個瀏覽器都認(rèn)識，這里給firefox用；*/

background-color:red\9; /* \9所有的ie瀏覽器可識別； */

background-color:yellow\0;  /* \0 是留給ie8的，但筆者測試，發(fā)現(xiàn)最新版opera也認(rèn)識，汗。。。不過且慢，后面自有hack寫了給opera認(rèn)的，所以，\0我們就認(rèn)為是給ie8留的；*/

+background-color:pink; /* + ie7定了； */

_background-color:orange; /* _專門留給神奇的ie6；*/

:root #test { background-color:purple\9; } /* :root是給ie9的，網(wǎng)上流傳了個版本是 :root #test { background-color:purple\0;}，呃。。。這個。。。，新版opera也認(rèn)識，所以經(jīng)筆者反 */
/* 復(fù)驗(yàn)證最終ie9特有的為:root 選擇符 {屬性\9;} */

@media all and (min-width:0px){ #test {background-color:black\0;} } /* 這個是老是跟ie搶著認(rèn)\0的神奇的opera，必須加個\0,不然firefox，chrome，safari也都認(rèn)識。。。 */

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /* 最后這個是瀏覽器新貴chrome和safari的。 */

好了就這么多了，特別注意以上順序是不可以改變的。css hack雖然可以解決個瀏覽器之間css顯示的差異問題，但是畢竟不符合W3C規(guī)范，我們平時寫css最好是按照標(biāo)準(zhǔn)來，這樣對我們以后維護(hù)也是大有好處的，實(shí)在不行再用。

區(qū)別不同瀏覽器的CSS hack寫法：

區(qū)別IE6與FF：

background:orange;*background:blue;

區(qū)別IE6與IE7：

background:green !important;background:blue;

區(qū)別IE7與FF：

background:orange; *background:green;

區(qū)別FF，IE7，IE6：

background:orange;*background:green !important;*background:blue;

注：IE都能識別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;

另外再補(bǔ)充一個，下劃線"_",
IE6支持下劃線，IE7和firefox均不支持下劃線。

于是大家還可以這樣來區(qū)分IE6，IE7，firefox：

background:orange;*background:green;_background:blue;

注：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。

您可能對以下文章也感興趣

• 不注意這點(diǎn)，\9和\0就可能對hack IE11\IE9\IE8無效 
• IE7/IE8/IE9/IE11 CSS hack 寫法 
• css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
• css巧用兩符號#和下橫線解決div高寬的瀏覽器兼容性問題

標(biāo)簽: hack