CSS hack

CSS hack

一、我不多使⽤hacker的，多是個⼈習慣吧，我不喜歡寫的代碼IE不兼容，而後⽤hack來解決。不過hacker仍是⾮常好⽤ 的。使⽤hacker我能夠把瀏覽器分爲3類：IE6 ；IE7和遨遊；其餘（IE8 chrome ff safari opera等）

 

◆IE6認識的hacker 是下劃線_ 和星號 *

 

◆IE7 遨遊認識的hacker是星號 *

 

 

 

⽐如這樣⼀個CSS設置：height:300px;*height:200px;_height:100px;

 

IE6瀏覽器在讀到height:300px的時候會認爲⾼時300px；繼續往下讀，他也認識*heihgt， 因此當IE6讀到*height:200px的

 

時候會覆蓋掉前⼀條的相沖突設置，認爲⾼度是200px。繼續往下讀，IE6還認識_height,因此他⼜會覆蓋掉200px⾼的設 置，把⾼度設置爲100px；

 

 

 

IE7和遨遊也是⼀樣的從⾼度300px的設置往下讀。當它們讀到*height200px的時候就停下了，由於它們不認識_height。 因此它們會把⾼度解析爲200px，剩下的瀏覽器只認識第⼀個height:300px;因此他們會把⾼度解析爲300px。由於優先級 相同且想衝突的屬性設置後⼀個會覆蓋掉前⼀個，因此書寫的次序是很重要的。

 

2.條件註釋

 

<!--[if lte IE 6]> 這段⽂字僅顯⽰在 IE6及IE6如下版本。 <![endif]--> <!--[if gte IE 6]> 這段⽂字僅顯⽰在 IE6及IE6以上版本。 <![endif]-->

 

<!--[if gt IE 6]> 這段⽂字僅顯⽰在 IE6以上版本（不包含IE6）。 <![endif]--> <!--[if IE 5.5]> 這段⽂字僅顯⽰在 IE5.5。 <![endif]-->

 

<!--在 IE6及IE6如下版本中加載css-->

 

<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->

 

缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。