關於IE6的一些常見的CSS BUG處理

關於IE6的一些常見的CSS BUG處理

CSS BUG：樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS BUG；

CSS Hack:css hack是指一種相容css 在不同瀏覽器中正確顯示的技巧方法，因他們都屬於個人對css代碼的非官方的修改，或非官方的補丁。

使用Hack的一些副作用：降低了css代碼的可讀性，增加了代碼的負擔

今天跟大家分享下關於IE6一些常見的BUG處理：

(1)圖片間隙：

　　a)div中的圖片間隙（該BUG出現在IE6及更低版本中）

　　　　描述：在div中插入圖片時，圖片會將div下方撐大三像素；

　　　　hack1:將與寫在一行上；

　　　　hack2:將轉為塊狀元素，給添加聲明：display：block；

　　b)dt,li中圖片間隙（IE6）

　　　　hack:添加聲明：display：block；overflow：hidden；

(2)預設高度（IE6）

　　描述：在IE6及以下版本中，部分塊元素擁有預設高度（低於18px-22px高度）

　　hack1：給元素添加聲明：font-size:0;

　　hack2：給元素添加聲明：overflow：hidden；

(3)雙倍浮向（雙倍邊距）

　　描述：當IE6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界加倍顯示。

　　hack：給浮動元素添加聲明：display：inline;

(4)百分比BUG

　　描述：在IE6及以下版本中在解析百分比時，會按四捨五入方式計算從而導致50%加50%大於100%的情況；

　　hack：給右面的浮動元素添加聲明clear：right；（清除右浮動）

(5)滑鼠指標

　　描述：Cursor屬性的hand屬性值只有IE8以下瀏覽器識別，其他瀏覽器不識別該聲明。Cursor屬性的pointer屬性值IE6及以上版本及其他核心瀏覽器都識別該聲明。

　　hack：如統一某元素滑鼠指標為手型，應添加聲明：Cursor：pointer；

(6)表單行高不一致

　　描述：表單元素行高不一致；

　　hack：給表單元素添加聲明：float：left；

(7)按鈕元素預設大小不一致

　　描述：各瀏覽器中按鈕元素大小不一致。

　　hack1:統一大小/（用a標記類比）；

　　hack2：input外套一個標籤，在這個標籤裡寫按鈕的樣式，把input的邊框和背景色去掉；

　　hack3：如果按鈕是圖片，直接把圖片作為按鈕背景；

(8)瀏覽器解析按鈕邊框時，會把邊框解析在按鈕內部，不會影響按鈕的大小。

(9)瀏覽器解析margin屬性值時，上下邊界的屬性值重合，左右相加；

