IE瀏覽器常見CSS兼容性問題及解決辦法

　　對於前端開發者來講，世界上存在着一個神奇的東西——IE瀏覽器，尤其是低版本的IE瀏覽器，慘不忍睹的兼容性使其臭名昭著。前端工作者很多的時間都花在了和它打交道上，所以大家紛紛吐槽IE瀏覽器如何的渣，簡直是萬惡之源。但是IE瀏覽器市場份額有非常大，噴完還要接着搞兼容。對於IE瀏覽器來講，我們應該有一個客觀的評價。首先其兼容性差，原因可想而知，更新速度太慢，要幾年才出一個版本，而市場上的FireFox、chrome等瀏覽器幾個月就有一個版本上市。中間那么長的時間足以將其bug充分的暴露出來，其他瀏覽器就沒有bug？當然不是！只是其他瀏覽器更新周期短，bug暴露機會小，而且修復速度快罷了。現在市場上的IE瀏覽器主要有IE6、IE7、IE8、IE9、IE10、IE11等版本，IE5.5基本在市場上消失，所以后面的兼容性問題我們不做討論。就這幾個版本，而且bug主要集中在IE6，所以我們針對他們解決就行了。而其他瀏覽器要是有bug就有點蛋疼了，原因是版本太多，比如Chrome,現在的版本都到30+了。另一方面就是瀏覽器大戰的歷史遺留問題，IE瀏覽器憑借其親爹windows的強大實力占領了令人眼紅的市場份額，似乎想主導整個瀏覽器市場，很多地方自以為是，不與別人一致。舉個例子：Chrome瀏覽器開發出一個好的功能，一般FireFox、Opera、Safari就會趕緊開發出來，並且盡量與其一致，而IE的反應則是要么根本不搭理你，要么實現的時候存在偏差，或者實現完全相同的功能，但是名字一定要跟人家不一樣，妄圖讓其他瀏覽器按照他的規范走，並主導別人。（以上純屬本人惡意猜測）然后呢！大家都看到了，親爹windows不要它了。win10搭載的是Edge瀏覽器，呵呵噠。現在讓我們步入正題，討論一些常用的IE瀏覽器Bug及解決辦法（資歷淺薄，有不對的地方望指正）：

PS：IEtester開發者工具不支持濾鏡，只要按照標准寫法寫即可。利用Edge的模仿各版本IE瀏覽器效果並不與真實版本效果一致，修復了部分的Bug，可能是微軟給臉上抹點白。

---

 

一、IE的不支持部分

1、IE6不兼容點線，要是非要這個效果的話就切背景平鋪嘮；

2、IE6 border 不支持transparent ;

3、IE6僅支持a標簽的偽類，IE7支持所以元素的偽類，但是不支持表單的focus；

4、IE6、7不支持display：table，inline-block等屬性；

5、IE6、IE7不支持min-width, min-height, max-width, max-height；

6、IE6、7 濾鏡要這樣寫：filter：alpha(opacity=56);

7、IE6不兼容固定定位，只能用JavaScript去解決；

8、IE6不支持PNG圖片的透明效果；

9、IE6、7、8實現透明效果只能通過濾鏡；

盡量遵守元素嵌套規范，比如不要用p標簽包h標簽。

若一個div中有兩個span，要垂直居中則兩個span都要vertical-align：Middle；

---

 

二、兼容性問題及解決辦法

1、IE6雙邊距bug：

在IE6下，塊元素有浮動和橫向margin值，橫向的margin會變成兩倍。和margin方向有關系。

解決辦法： 將塊元素轉成內嵌元素。display：inline；

2、IE6的子元素可以撐開父元素：

解決辦法：進行精確的計算父子級關系。當然可以通過overflow：hidden將超出的子元素隱藏掉。

3、若元素浮動，則一行全浮動。否則會出現邊距問題（主要是IE6）甚至奇葩問題，其他瀏覽器好像也有

4、如果給input加背景，那么在輸入內容超過輸入框長度時，背景會移動：

解決辦法：把input放在div里面，讓input的背景透明，並且把背景頭給div。

5、IE6、7下幾px的間隙問題：

    li本身沒有浮動，但是內容的浮動讓li多出來幾px的間隙。

解決辦法：

    1、給li加浮動，

    2、給li加vertical-align：top/middle/bottom  也可以用來清除圖片下的間隙

圖片也可以display：block；解決，但是多圖片同行就不行了

6、IE6最小高度問題：

    元素高度小於19px的會被當做19px處理。

解決辦法：

     1、加font-size：0;解決辦法有局限

     2、overflow：hidden；

7、IE6下父級元素包不住子級的相對定位

解決辦法：給父級元素定位

8、IE6下定位元素的父級寬高都為奇數那么在 IE6 下定位元素的 right 和 bottom 都有1px的偏差。

沒法解決。

9、在IE6下，解決margin傳遞，觸發haslayout，zoom：1；

其他瀏覽器可以用overflow：hidden；

這其實不算IE的bug，瀏覽器都有這個問題，也可以通過添加上下padding或者border來解決。

10、IE6下，父元素有邊框的時候，子元素的margin消失了：

解決辦法同上。

11、IE6:當一行子元素寬度之和與父級相差大於3像素或者有不滿行狀態的時候，最后一行的margin-bottom就會消失。

目前沒辦法解決。

12、IE6：當li間隙問題和IE6最小間隙同時存在時(li本身沒浮動，但是其中內容有浮動導致其下面有間隙：給li加vertical-align屬性）

解決辦法：overflow：hidden，float：xx;

13、IE6文字溢出bug：

     子元素寬度和父元素寬度相差小於3px的時候，兩個浮動元素中間有注釋或者內嵌元素。

解決辦法：把內嵌去掉或者調整父級大小。

14、IE6 當絕對定位和浮動元素並列的時候，絕對定位元素會消失。

解決辦法：自然是去掉並列關系。給定位包個div

15、IE6下，當thead、tbody、tfoot和下面的tr同時加樣式，tr的樣式會代替父元素的樣式。

沒有解決辦法。

16、IE6、7下輸入類型的表單控件，默認上下有1px的邊距。

解決辦法：讓控件脫離文檔流。

17、輸入類型表單控件border：none；無效

解決辦法：border：0，或者給input重置背景。

18、 一個div中的元素全浮動，會除掉div的margin-bottom，但是IE6不會。
    對div進行清除浮動；
19、div#footer 的上面div中的div進行百分比布局時，如果footer不設置寬度，在IE6中footer會被拉上去，
    +、設置#footer{width: 100%}；這樣會出現上面的問題。上面div的margin-bottom 會消失
    +、設置#footer{clear：both；}；

---

三、hack

hack是一種解決兼容性很好的辦法，但是現在開發不怎么贊成使用，注意盡量少使用吧！

1、條件注釋法（一般使用在IE6-IE9）：

只在IE下生效：

<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->

只在IE6下生效：

<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->

只在IE8以下生效：

<!--[if lt IE 8] 這段文字只在IE8瀏覽器以下顯示 <![endif]-->

只在IE6以上版本生效：

<!--[if gte IE 6]> 這段文字只在IE6以上(包括)版本IE瀏覽器顯示 <![endif]-->

只在IE8上不生效：

<!--[if ! IE 8]> 這段文字在非IE8瀏覽器顯示 <![endif]-->

非IE瀏覽器生效：

<!--[if !IE]> 這段文字只在非IE瀏覽器顯示 <![endif]-->

2、屬性前綴法：

標准模式下：

#selector{
　　-color: red;    　　 /* 減號和下划線是IE6專有的hack */
　　color：blue\9;   　　/* \9 IE6-IE10都生效 */
　　color: pink\0;  　　 /* \0 IE8-IE11生效 */
　　color: green\9\0;　　/* \9\0 IE9和IE10生效 */ 
　　*color: yellow;　　  /* [.*+<>] IE6-IE7生效 */
}

 3、選擇器前綴法：

*+html selector{color:blue;} 　　　/* *+html前綴只支持IE7 */

 

注意：

不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面；

IE6下在!important后面加屬性，會破壞掉前面的優先級。

還有很多其他瀏覽器的hack，這里來不再一一介紹，很多教程，介紹一個比較清楚的 CSS Hack

http://www.duitang.com/static/csshack.html

---

 

四、雜碎

1、支持png圖片透明效果：

selector{
　　background-img: url(xx.jpg);
　　_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");
}

 

2、模擬固定定位：

selector{
　　position: absolute;
　　top: expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2));
}