IE下大部分相容性都是因為haslayout屬性的觸發問題,儘量觸發haslayout屬性,可以減少很多IE下得相容性問題,例如:

1. 在IE6下,子級的寬度會撐開父級設定好的寬度.
   準確設定好寬度.

2. IE6中,元素浮動,如果寬度需要有內容撐開

需要給裡面的塊元素都設定浮動才可以.

1. IE6.7下,元素要通過浮動在同一排

就需要給這行元素都加浮動.

1. 標籤的巢狀規則
   行標籤不能包裹塊標籤

2. IE6下,元素的高度如果小於19px,會被當成19px處理

解決方法overflow:hidden.

1. IE6下不支援1px的dotted邊框樣式

解決辦法:切背景平鋪(2px).

1. IE6下父級有邊框時,子元素margin會失效

解決辦法:觸發父級的haslayout屬性.

1. IE6下雙邊距的BUG, 塊元素有浮動有橫向的margin值時,橫向的margin值會擴大兩倍

解決辦法:display:inline.

8.1. 一排浮動的margin-left(right)出現兩倍的margin左右值

解決辦法相同.

1. IE6 7下,li 本身沒有浮動,li 裡面的內容有浮動,li 下會產生一個間隙.

解決方法:1.li加浮動. 2. li 加vertical-align:top.

9.1 在IE6下, 最小高度的 bug 和 li 的間隙問題共存時,
給 li 加浮動 .

1. 當一行子級元素寬度之和和父級的寬度相差超過3px,或者子級元素不滿行的情況時,最後一行的子級元素的margin-bottom會失效.

無法解決,只能避免.

1. IE6下,文字溢位bug 子元素的寬度和父級的寬度如果相差小於3px的時候,兩個浮動元素中間如果有註釋或者內聯元素,就會出現文字溢位,內聯元素越多,溢位越多

解決辦法: 用div把註釋或者內聯元素包起來.

1. 當浮動元素和絕對定位元素是兄弟關係時,絕對定位失效

解決辦法: 不讓浮動元素和絕對元素是兄弟關係,用div或者其他標籤把目標元素抱起來.

1. IE6 7 下子級元素有相對定位,父級overflow包不住子級元素

給父級也加相對定位.

1. IE6 下,如果絕對定位的父級寬高是奇數時,子級元素的 right 和 bottom 值會有 1px 的偏差

無法解決. 避免.

15 opacity透明度問題

filter:alpha(opacity=50).

1. IE6 7 下,輸入型的表單標籤控制元件會有1px的間隙.

給input加浮動.

1. IE6 PNG圖片透明度問題

呼叫JS函式.

1. IE 條件註釋語句