1. 首頁 > 云知道 > >

瀏覽器兼容之旅第四站:IE常見Bug總結及修復方法—part2

云知道

《瀏覽器兼容之旅第三站:IE常見Bug總結及修復方法part1》中介紹了IE瀏覽器下十種經典的Bug產生的原因，以及如何在寫代碼中避免這些Bug的產生，或者說Bug發生后，又如何來解決這些Bug 。這節我們接著來看IE下的相關Bug 。盡量了解并掌握他們，只有知已知彼才能百戰百勝 。因為大家都嘗過IE下的苦楚，有時為了一個Bug糾結一兩天，或者更長的都有，以致于都想頭撞南墻，不想活了，這都是IE給逼的呀 。不過隨著時間往后的推移，我也不覺得他有什么恐怖的，我認為寫代碼時，結構上多加注意，寫樣式時盡量避免 。這樣一來，也沒有多少Bug會纏著你 。別的不說了，我們繼續下面的內容IE的Bug處理 。

一、IE6克隆文本的Bug
這個Bug在IE6下碰到代碼的注釋常發生，時常用朋友問到，怎么我的沒有輸入這個東西，怎么會生成呢？我們來看下面的一張圖，展示的就是月IE6下無故多了一些文本：

瀏覽器兼容之旅第四站:IE常見Bug總結及修復方法—part2



在我們的Html代碼為：

復制代碼代碼如下:
!-- IE6 does not like comments --
div class="floating_div"
... some markup ...
/div
!-- IE6 does not like comments really --

往往你的結構如上面的風格時，就會碰到IE6下多了一段文本，不過這樣的Bug不會說，結構類似上面就會產生，這也要看你的運氣了，你運氣不好，你一直沒機會看到這樣的Bug,你要是運氣好，常能看到 。是不是對IE6更加無語了 。那么針對這樣的Bug要如何處理呢？也很簡單

方法一：
方法一是使用條件注釋，這樣可以輕松的避開這個Bug 。有關于條件注釋的使用，大家可以點擊《瀏覽器兼容之旅的第一站:如何創建條件樣式》查閱 。我們來看代碼：

復制代碼代碼如下:
!--[if IE] IE6 does not like comments ![endif]--
div class="floating_div"
... some markup ...
/div
!--[if IE] IE6 does not like comments ![endif]--

方法二：在注釋前面的那個浮動元素加上display:inline
方法三：最安全的解決方法，也是最簡單的方法，把注釋全部去掉 。這樣就永遠不會有這個Bug發生 。
個人更趨向于方法一和方法三，當然大家要是想了解更多有關天這個Bug話，還可以點擊 Adam Hicks 寫的《IE6 Ghost Text Bug 》一文 。

二、ＩＥ下圖片縮放Bug
這個你一定會喜歡，就是圖片在IE下縮放時會影響其質量，你可以讓他和別的瀏覽器對比一下，IE下看起圖片質量極差：

瀏覽器兼容之旅第四站:IE常見Bug總結及修復方法—part2



解決辦法：

復制代碼代碼如下:
img { -ms-interpolation-mode: bicubic; }

三、IE6下PNG圖片透明Bug
大家都知道，有時需要使用透明圖片，別然gif和png8都可以制作透明圖片，但這兩者對于要求強美感的你來說一定達不到你的要求，因為會有雜邊，那么使用png24或png32圖片，質量是沒有問題了，可引發另一個頭痛的問題，就是IE6下面顯示圖片會有一層淡蘭色的背景，

瀏覽器兼容之旅第四站:IE常見Bug總結及修復方法—part2



這樣一來我們需要起辦法來解決掉這層淡蘭色的背景色，方法很多，常用的有兩種：
方法一：濾鏡的方法

復制代碼代碼如下:
.img{
background:url(’http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’);
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://www.rkxy.com.cn/dnjc/’http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’,sizingMethod=’scale’);
}
或者：
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://www.rkxy.com.cn/dnjc/’http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’,sizingMethod=’scale’);

推薦閱讀