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

　　對於前端開發者來說，世界上存在着一個神奇的東西——IE瀏覽器，尤爲是低版本的IE瀏覽器，慘不忍睹的兼容性使其臭名昭著。前端工做者不少的時間都花在了和它打交道上，因此你們紛紛吐槽IE瀏覽器如何的渣，簡直是萬惡之源。可是IE瀏覽器市場份額有很是大，噴完還要接着搞兼容。對於IE瀏覽器來說，咱們應該有一個客觀的評價。首先其兼容性差，緣由可想而知，更新速度太慢，要幾年纔出一個版本，而市場上的FireFox、chrome等瀏覽器幾個月就有一個版本上市。中間那麼長的時間足以將其bug充分的暴露出來，其餘瀏覽器就沒有bug？固然不是！只是其餘瀏覽器更新週期短，bug暴露機會小，並且修復速度快罷了。如今市場上的IE瀏覽器主要有IE六、IE七、IE八、IE九、IE十、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，多是微軟給臉上抹點白。

---

 

1、IE的不支持部分

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

二、IE6 border 不支持transparent ;

三、IE6僅支持a標籤的僞類，IE7支持因此元素的僞類，可是不支持表單的focus；

四、IE六、7不支持display：table，inline-block等屬性；

五、IE六、IE7不支持min-width, min-height, max-width, max-height；

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

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

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

九、IE六、七、8實現透明效果只能經過濾鏡；

儘可能遵照元素嵌套規範，好比不要用p標籤包h標籤。

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

---

 

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

一、IE6雙邊距bug：

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

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

二、IE6的子元素能夠撐開父元素：

解決辦法：進行精確的計算父子級關係。固然能夠經過overflow：hidden將超出的子元素隱藏掉。

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

四、若是給input加背景，那麼在輸入內容超過輸入框長度時，背景會移動：

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

五、IE六、7下幾px的間隙問題：

    li自己沒有浮動，可是內容的浮動讓li多出來幾px的間隙。

解決辦法：

    一、給li加浮動，

    二、給li加vertical-align：top/middle/bottom  也能夠用來清除圖片下的間隙

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

六、IE6最小高度問題：

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

解決辦法：

     一、加font-size：0;解決辦法有侷限

     二、overflow：hidden；

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

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

八、IE6下定位元素的父級寬高都爲奇數那麼在 IE6 下定位元素的 right 和 bottom 都有1px的誤差。

無法解決。

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

其餘瀏覽器能夠用overflow：hidden；

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

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

解決辦法同上。

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

目前沒辦法解決。

十二、IE6：當li間隙問題和IE6最小間隙同時存在時(li自己沒浮動，可是其中內容有浮動致使其下面有間隙：給li加vertical-align屬性）

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

1三、IE6文字溢出bug：

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

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

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

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

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

沒有解決辦法。

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

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

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

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

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

---

3、hack

hack是一種解決兼容性很好的辦法，可是如今開發不怎麼同意使用，注意儘可能少使用吧！

一、條件註釋法（通常使用在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]-->

二、屬性前綴法：

標準模式下：

#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生效 */
}

 三、選擇器前綴法：

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

 

注意：

不論是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面；

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

還有不少其餘瀏覽器的hack，這裏來再也不一一介紹，不少教程，介紹一個比較清楚的 CSS Hack

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

---

 

4、雜碎

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

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

 

二、模擬固定定位：

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