你不知的IE的bug及其解決方案

標籤：style   http   color   使用   os   檔案   

E令人咬牙切齒的bug不勝枚舉，其中IE6更是臭名昭著，令人髮指。這裡總結出IE下最為嚴重的5個bug，及其應對方案。

1、IE6下無法顯示png格式的透明資訊

這個bug是眾多網頁設計師的噩夢，雖然可以採用gif代替，但是gif的表現力實在有限，單是陰影就無法完美顯示了，這無疑給網頁的表現力下了一個檔次。

解決方案：

1. img {
2.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
3. }

主要利用IE濾鏡來解決png無法透明的問題。
接下來來看第二種解決方案：js
點此下載
上面是jquery用於解決這個bug的外掛程式，強烈推薦！

2、IE6下遮罩層無法覆蓋選擇框

解決這個bug請看我之前寫的一篇博文：http://www.36ria.cn/?p=395

3、IE6下雙倍外邊距問題

又是一個令人髮指的bug，IE6下設定margin-left或margin-right，居然會自動加倍。

解決方案：

1. div#content {  
2.     float:left;  
3.     width:200px;  
4.     margin-left:10px;  
5.  
6.     /* fix the double margin error */ 
7.     display:inline;  
8. }

原理：關鍵是 display:inline; ，將其轉換為內嵌元素。

4、:hover 只支援a，無法應用於其他元素

眾所周知，在網頁裡面滑鼠移動轉場樣式，是個應用非常廣泛的功能，可是IE6下只支援連結，其他元素都無法使用:hover。

解決方案：JS

1. /* jQuery Script */  
2. $(‘#list li‘).hover(  
3.  
4.     function () {  
5.         $(this).addClass(‘color‘);  
6.     },  
7.       
8.     function() {  
9.         $(this).removeClass(‘color‘);  
10.     }  
11. );

1. /* CSS Style */  
2. .color {  
3.     ">#f00;    
4. }

1. <ul id="list"> 
2.     <li>Item 1</li> 
3.     <li>Item 2</li> 
4.     <li>Item 3</li> 
5. </ul>

原理：利用jquery的特殊的hover事件

5、IE下不顯示預設的垂直捲軸

解決方案如下：

1. html {  
2.     overflow: auto;  
3. }