IE瀏覽器兼容性問題

1、在 IE6 下,子級的寬度會撐開父級設置好的的寬度

解決方法:盒模型的計算一定要精確,否則 IE 瀏覽器可能會顯示不同


2、在 IE6 下,元素浮動,如果寬度需要內容撐開

解決方法:給裏面的塊元素都添加浮動纔可以


3、在 IE6,7 下,元素要通過浮動排在同一排,就需要給這行元素都加浮動,否則 左右 div 之間會有一個 3px 的間距


4、在 IE6 下,行標籤裏面包含塊標籤,IE會會自動補全行標籤

解決方法:注意標籤的嵌套規則


5、在 IE6 下,元素的高度如果小於 19px 的時候,會被當成 19px 來處理

解決方法:給元素添加 overflow:hidden;


6、在 IE6 下,不支持 1px 的dotted 邊框樣式

解決方法:切背景平鋪


7、在 IE6 下,大部分兼容性都是因爲 hasLayout 屬性的觸發問題,儘量去觸發 hasLayout 屬性,可以減少很多 IE 下的兼容性問題
在 IE6 下,父級有邊框的時候,子元素的 margin 會失效
解決方法:觸發父級的 hasLayout 屬性


8、在 IE6 下,塊元素有浮動有橫向的 margin 的值得時候,橫向的 margin 的值會擴大 2 倍(雙邊距),行元素不會有雙邊距的問題出現

解決方法:給元素添加 display: inline;


9、在 IE6,7 下,li 本身沒有浮動,若 li 裏面的內容有浮動,li 下回產生一個間隙

解決方法: 
1、給 li 加浮動
2、給 li 加 vertical-align:top;


10、在 IE6,7 下,li 本身沒有浮動,若 li 裏面的內容有浮動,li 下回產生一個間隙
解決方法: 
1、給 li 加浮動
2、給 li 加 vertical-align:top;
在 IE6 下最小高度的 bug 和 li 的間隙問題共存的時候,給 li 加浮動,vertical-align 不好使


11、在 IE6 下,當一行子級元素寬度之和和父級的寬度相差超過 3px,或者子級元素不滿行的情況的時候,最後一行的自己元素的 margin-bottom 會失效

解決方法:目前還沒有方法可以處理這個 bug,只能避免


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

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


13、在 IE6 下,當浮動元素和絕對定位元素是兄弟關係的時候,絕對定位會失效

解決方法: 不讓浮動元素和絕對定位元素是兄弟關係,用 div 或者其他標籤把 a 標籤(絕對定位元素)包起來


14、在 IE6,7 下,子級元素有相對定位, 父級 overflow 包不住子級元素

解決方法: 給父級元素也加相對定位


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

解決方法:無解決方法,只能避免


16、在 IE6 下,固定定位是不支持的

解決方法:無法只通過修改樣式來處理,只能通過 js 來模擬固定定位


17、在 IE6,7 下,輸入型的表單標籤控件上下會有 1px 的間隙

解決方法:給輸入型表單標籤加浮動


18、IE6 不支持 PNG-24 的圖片格式,顯示不了透明與半透明的圖片

解決方法:引入 js(DD_belatedPNG_0.0.8a.js)


19、在 IE6,7,8 下,註釋的內容可以通過註釋條件語句可以識別


20、css hack:
\9 IE10之前的 IE 瀏覽器解析的代碼,表示 IE 9 包括 9 之前的 IE瀏覽器
+或者* 表示 IE 7 包括 7 之前的 IE瀏覽器
_ 表示 IE6 包括6 之前的額 IE瀏覽器

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章