IE下大部分兼容性都是因爲haslayout屬性的觸發問題,儘量觸發haslayout屬性,可以減少很多IE下得兼容性問題,例如:
在IE6下,子級的寬度會撐開父級設置好的寬度.
準確設置好寬度.IE6中,元素浮動,如果寬度需要有內容撐開
需要給裏面的塊元素都設置浮動纔可以.
- IE6.7下,元素要通過浮動在同一排
就需要給這行元素都加浮動.
標籤的嵌套規則
行標籤不能包裹塊標籤IE6下,元素的高度如果小於19px,會被當成19px處理
解決方法overflow:hidden.
- IE6下不支持1px的dotted邊框樣式
解決辦法:切背景平鋪(2px).
- IE6下父級有邊框時,子元素margin會失效
解決辦法:觸發父級的haslayout屬性.
- IE6下雙邊距的BUG, 塊元素有浮動有橫向的margin值時,橫向的margin值會擴大兩倍
解決辦法:display:inline.
8.1. 一排浮動的margin-left(right)出現兩倍的margin左右值
解決辦法相同.
- IE6 7下,li 本身沒有浮動,li 裏面的內容有浮動,li 下會產生一個間隙.
解決方法:1.li加浮動. 2. li 加vertical-align:top.
9.1 在IE6下, 最小高度的 bug 和 li 的間隙問題共存時,
給 li 加浮動 .
- 當一行子級元素寬度之和和父級的寬度相差超過3px,或者子級元素不滿行的情況時,最後一行的子級元素的margin-bottom會失效.
無法解決,只能避免.
- IE6下,文字溢出bug 子元素的寬度和父級的寬度如果相差小於3px的時候,兩個浮動元素中間如果有註釋或者內聯元素,就會出現文字溢出,內聯元素越多,溢出越多
解決辦法: 用div把註釋或者內聯元素包起來.
- 當浮動元素和絕對定位元素是兄弟關係時,絕對定位失效
解決辦法: 不讓浮動元素和絕對元素是兄弟關係,用div或者其他標籤把目標元素抱起來.
- IE6 7 下子級元素有相對定位,父級overflow包不住子級元素
給父級也加相對定位.
- IE6 下,如果絕對定位的父級寬高是奇數時,子級元素的 right 和 bottom 值會有 1px 的偏差
無法解決. 避免.
15 opacity透明度問題
filter:alpha(opacity=50).
- IE6 7 下,輸入型的表單標籤控件會有1px的間隙.
給input加浮動.
- IE6 PNG圖片透明度問題
調用JS函數.
- IE 條件註釋語句