1. 程式人生 > >超全的IE相容性問題及解決方案

超全的IE相容性問題及解決方案

1.怪異盒模型:在老版本IE下不設定文件宣告,頁面就會進入怪異盒模型解析,所以要設定文件宣告;

2.IE6下,子元素的寬高超出父級的寬高 :可以把父級設 置好的寬度撐開

3.在IE6下,塊屬性元素的高度小於19px:高度會按照19px顯示處理
(解決辦法:overflow: hidden; 把顯示於高度之外的多餘部分不顯示)

4.在chrom下,文字大小小於12px:文字大小最小隻能設定12px,設定低於12px都會當成12px處理
(解決方法:用圖片代替)

5.在IE6下,1px的點線會被顯示成虛線:dotted會顯示成dashed
(解決方法:用圖片代替)

6.在IE6下,邊框加transparent的情況

:邊框還是會顯示黑色
(解決方法:border-style設定成虛線)

7.對於HTML5新增標籤部分瀏覽器無法識別問題:用JS定義
{document.createElement("header") 然後把header的display:block;}

8.在IE6,7下不支援給塊標籤加inline-block: 只是加給塊元素不支援,加給內嵌式支援的並且可以觸發haslayout,加給塊加了之後沒反應,塊標籤還是獨佔一行
(解決方法:在inline-block下新增以下程式碼{display:inline; zoom: 1;})

9.在IE6下父級有邊框造成子元素margin失效的問題


(解決方法:觸發haslayout)

10.在IE6,7下,浮動元素的父級設定了寬度的話,不需要清浮動

11.元素浮動之後,如果寬度可以固定,一定記得設定固定寬度,如果寬度需要內容撐,就給它裡面的塊元素都加上浮動

12.IE6下雙邊距BUG在IE6下,塊元素有浮動有橫向的margin,橫向的margin值會被放大成兩倍
(解決方法: display:inline; 把塊元素變成內嵌)

13.IE6下最後一行下margin失效問題 在IE6下,一行元素的寬度之和 和 父級的寬度相差大於等於3,則最後一行元素的下margin失效
(解決辦法: 無(所以需要考慮IE6相容性寫樣式時儘量不要用下margin,可以用給父級加下padding的方法代替)

14.在IE6下元素內容被複制的問題 在IE6下元素的寬度和父級寬度相差小於3px,並且兩個浮動之後之間有註釋或者內嵌,元素內容會被複制
(解決方法:可以用div把註釋或者內嵌元素包起來)

15.在IE6中li裡的內容浮動了之後li下邊產生間隙的問題 在IE6中,li本身沒有加浮動,但是 li 的內容都浮動了,或者有兩個以上的浮動,li的下邊就會產生幾個px的間隙
(解決方法: 1 給li 加浮動 2給li 加vertical-align:top)

16.在IE6下絕對定位元素消失掉的問題(在IE6下,浮動元素和絕對定位元素是同級關係並且浮動元素的佔位寬度和父級小於3px,絕對定位元素會消失掉)
(解決方法: 把絕對定位元素單獨包起來)

17.在IE6下,父級的寬高是奇數的話,元素的right值和bottom值會有1px的偏差
(解決辦法:無)

18.在IE6,7下,子元素如果有相對定位的話,父級的overflow包不住它
(解決方法: 給父級也加相對定位)

19.IE8和IE8之前瀏覽器不支援opacity的問題
(解決方法:filter:alpha(opacity= 40 ) filter是IE特有的屬性,在IE8及之前的版本才會被識別)

20.在IE6,7下不支援border-spacing這條樣式
(解決方法:1. border-collapse:collapse(會合並邊框)2.cellspacing(行間樣式,不會合並邊框)

21.在IE6,7下input上下各有1px的間隙
(解決方法: 給input加浮動)

22.在IE6下,輸入型別表單控制元件上下各有1px的間隙
(解決方法:給控制元件加浮動)

23.在IE6下,輸入型別表單控制元件border:none;無效
(解決方法:1. border=“0” 2 重置input的背景)

24.在IE6,7下,輸入型別的表單控制元件,輸入文字的時候,圖片會隨著文字一起移動
(解決方法: 把圖片給父級)

25.在IE6、7下,首行縮排可控制元素 text-indent會影響input等元素的位置
(解決方法:用padding-left來控制距離)

26.在IE6下,只支援link,hover,visited,active這四個偽類,並且只支援新增給a標籤;

27.在IE7下,只支援link,hover,visited,active這四個偽類,可以新增給其它標籤;