針對IE6的一些CSS Hack編寫時的注意點小結

標籤：txt   ie6   w3c   導致   fixed   ram   浮動   盒子模型   range   

   

區分出IE6的hack寫法
1.區別IE6、7與FF/IE8：

JavaScript Code複製內容到剪貼簿

1. background:blue;*background:orange;   

引用
顯示效果：
IE 6/7：orange
FF/IE8:blue
原理：FF/IE8不支援*開頭，而IE6/7都支援。

2.區別IE6與IE7/IE8/FF：

CSS Code複製內容到剪貼簿

1. background:green;_background:blue;   

引用
顯示效果：
IE7/8/FF：green
IE6:blue
原理：IE6支援底線"_"，IE7、8和firefox均不支援底線。

3.區別FF/IE8和IE6/7：

CSS Code複製內容到剪貼簿

1. background:orange;+background:green;-background:blue;  

或者

CSS Code複製內容到剪貼簿

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

引用
顯示效果：
IE6：blue
IE7：green
FF/IE8:orange
原理：IE6能識別-，IE7能識別+，IE8和FF都不能識別+和-
IE8/FF都不識別*，IE7優先識別!important，IE6不能識別!important。

4.可同時區分IE8、IE7、IE6、Firefox的CSS hacks：

CSS Code複製內容到剪貼簿

1. .test{   
2.     color:#000; /* Firefox */  
3.     color:/*\**/#00f\9; /* IE8 */  
4.     *color:#f00; /* IE7 */  
5.     _color:#0f0; /* IE6 */  
6. }  

IE6相容的一些額外需要考慮的細節：
1.position:fixed

對這個屬性印象深刻，每一次需要用到固定的時候，IE6總是蹦出來告訴你，我不支援position:fixed,你要對我特殊點，要麼使用CSS運算式，要是時刻計算滾動的高度，再加上position:absolute.

2.浮動雙倍邊距

當在浮動中使用margin時，你要時刻記得加上display:inline,不然IE6不給你好臉色，總是會讓你布局錯亂，就因為它會是雙倍的邊距。

3.背景透明

之前總是用png8來相容IE6，實在沒辦法時，你還要ps上下功夫，圖省事的話，你要加一個DD_belatedPNG.JS，各種技能層出不窮，但是都有一個就是耗時不討好。

4.max-height/min-height

想要給它一個最大尺寸或者最小尺寸時，IE6卻告訴你，我只能用確定尺寸，你需要的話，用運算式吧

5.IE6 點選連結出現虛線

呵呵，產品說不去掉影響使用者體驗，我只想說：用了IE6還談啥體驗。

6.彈窗出現在select上要加個iframe

因為select在IE6中是一個控制項，層級比其他層高，所以如果彈窗要相容IE6，背景記得加多一層iframe

7.尺寸超出會自動延伸

假如你給某個層加了一個高度，當內容超出時，沒有overflow:hidden;時，IE6預設會撐開，有時候會出現莫名布局錯亂。

8.不能使用.class.class2

使用以上的css寫法在ie6中不識別，這導致了，很多時候你不得不改變重構的策略，改用.class-class1的寫法。

9.盒子模型解析不一致

在Quirks Mode中，盒子的寬度計算與Standards Mode的不同

在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom，
而在 W3C 標準的盒模型中，box 的大小就是 content 的大小。

針對IE6的一些CSS Hack編寫時的注意點小結