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

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

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

在我們的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下看起圖片質量極差：

解決辦法：

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

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

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

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

方法二：DD_belatedPNG.js
可以使用DD_belatedPNG來產現，具體實如何實現，大家可以參考前面我所整理的《Drupal7中解決IE6的png透明問題》一文。或者在ＧＧ和度娘中直接搜索關鍵字fix PNG Transparency for ie6 將會有一大堆關于解決IE6下的PNG透明問題。

四、IFrame透明背景Bug
這個Bug是有關于iframe有背景透明問題在Firefox和Safari中，你應該不會遇到這個問題，因為默認情況下，iframe的背景設置為透明，但在IE瀏覽器，它不會。你需要在iframe中設置［allowTransparency=true］，并在調入的頁面中設置其body的background-color為transparent:
HTML Markup

復制代碼代碼如下:
iframe src="https://www.questions.com.cn/dnjc/content.html" allowTransparency="true" /iframe

而且需要在iframe中調入的content.html中設置其body的背景色：

復制代碼代碼如下:
body {background-color: transparent;}

五、禁用IE瀏覽器默認的垂直滾動條
默認情況下， IE顯示垂直滾動條，即使內容很好地適合窗口。你可以使用overflow:auto來改變，設置他需要時顯示出來

復制代碼代碼如下:
html {
overflow: auto;
}

六、IE6下:hover偽類Bug
在IE6下只支持a:hover的效果，對于其他元素的:hover狀態都不支持的。對于這個bug最好的解決辦法就是使用jQuery或js來解決，下面我們一起看一個jQuery的解決方案
HTML Markup

復制代碼代碼如下:
ul id="list"
liItem1/li
liItem2/li
liItem3/li
/ul

Css Code

復制代碼代碼如下:
.hover {
background: #f00;
}

jQuery Code

復制代碼代碼如下:
$(’#list li’).hover(function () {
$(this).addClass(’hover’);
},function() {
$(this).removeClass(’hover’);
});

上面的方法是通過jQuery中的.hover()以及.addClass()和.removeClass()幾種方法共同實現。有關于.addClass()和.removeClass()也可以參閱《jQuery中.addClass()和.removeClass()》一文的相關介紹。

七、修復min-width/max-width和max-heigt/min-height的Bug
上一節《瀏覽器兼容之旅的第三站:IE常見Bugpart1》中，我們就得知：在IE6下，他是不識別min-height屬性的，其實他不單單不識別min-height屬性，而且他還不演識別max-height,min-width,max-width等屬性。這是對于前端攻城師來說又是一個非常棘手的問題，因為許多布局方案中都時常會用到這些屬性，才能更好的工作。在現代瀏覽器中，你可以輕松的像下面那樣輕松的使用這些屬性就能正常工作：

復制代碼代碼如下:
div.max-height {
max-height: 300px;
}
div.min-height {
min-height: 300px;
}
div.max-width {
max-width: 300px;
}
div.min-width {
min-width: 300px;
}

上面這些在IE6下是不識別的，換句話說是無法正常工作的，因為他們完全不明白這些基本的CSS屬性。不過幸運的是，IE瀏覽器有一套其自己的專有屬性，就是使用javaScript表達式來操縱(X)HTML的文檔屬性，比如說我們這里所說的min-width,max-width和min-height，max-height等屬性。不過使用IE的專有屬性有兩個缺點：

表達式是基于javaScrpt腳本上運行，如果用戶的瀏覽器不支持javaScript或禁用了javaScript時，那么在用戶瀏覽器上將無法正常運行；
另外使用IE的專有屬性表達式是非常耗費資源，同時也可能產生負面影響。
雖然使用IE專有屬性那不良之處，但有時為了滿足用戶的完美追求，也只好犧牲一些性能上的條件，來完整的讓這幾個屬性在IE6上正常運行。
1、max-width

復制代碼代碼如下:
/* max-width for IE6 */
* html div.max-width {
width: expression(document.body.clientWidth299 ? "300px" : "auto");
}
/* max-width for standards-compliant browsers */
div.max-width {
max-width: 300px;
}

2、min-width

復制代碼代碼如下:
/* min-width for IE6 */
* html div.min-width {
width: expression(document.body.clientWidth301 ? "300px" : "auto");
}
/* min-width for standards-compliant browsers */
div.min-width {
min-width: 300px;
}

3、max-height

復制代碼代碼如下:
/* max-height for IE6 */
* html div.max-height {
height: expression(this.scrollHeight299 ? "300px" : "auto");
}
/* max-height for standards-compliant browsers */
div.max-height {
max-height: 300px;
}

4、min-height

復制代碼代碼如下:
/* min-height for IE6 */
div.min-height {
min-height: 500px;
height: auto !important;
height: 500px;
}

八、修復position:relative的Bug
這個Bug并不常見，因為我們有里在元素中使用position:relative達到某種效果。在現代瀏覽器使用position:relative屬性定位嵌套元素不會有任何問題，但在IE6下并不是那么的友好，常給會我們的布局帶來一些意想不到的錯誤。不過解決這樣的問題很輕松，我們只需要給使用了相對定位的元素用zoom:1屬性觸發IE6下的hasLayout就可以解決。

復制代碼代碼如下:
selector {
position: relative;
}
* html .selector {
zoom: 1;
}

注：使用zoom:1時不應該應用在行內元素(inline)上，不然在IE6下將觸發元素為塊元素。
九、修復margin的負值
負邊距在我們平時的Web制作中，為了達到一定的效果也時常用到，而在現代瀏覽器中使用負的邊距并不會有任何問題，但是在IE6下對負的margin值并不友好，除非你在目標元素上使用position:relative屬性：

復制代碼代碼如下:
.selector {
margin: -1.5em;
}
* html .selector {
position: relative;
zoom: 1;
}

十、修復overflow的問題
overflow是一個好東西呀，有時他可以幫我們把溢出的內容不在顯示，有時也可以幫我們清除浮動（《Clear Float 》），用時還真離不開這個overflow 。可是在IE6上使用overflow屬性會給我們帶來意想不到的、無法解釋的顯示問題。幸運的是我們配合hasLayout可以解決一下溢出問題，如下面的例子：

復制代碼代碼如下:
.selector {
overflow: hidden
}
* html .selector {
zoom: 1;
}

但當font-style:italic時，將有一個新的問題會發生會擴大它的父元素的寬度。要解決這個細微的差別，只需要在元素的父元素加上一個：

復制代碼代碼如下:
* html .selector {
overflow-x: hidden;
}

這里我們又一起見證了IE下的另外十個Bug以及其避免和解決的方法，雖然沒有《瀏覽器兼容之旅第三站:IE常見Bug總結及修復方法part1》中介紹的那十個Bug經典，但也是IE的Bug 。沒有碰到或許你認為不是問題，但當你碰到了，又有時會抓破了頭皮了都不知是何故，所以還是那句話，以備急需。那么到現在，我們總共見證了IE下的二十種不同的Bug ，以及其處理方法，其中有很多大家見識了，也處理過了，但我相信其中有很多肯定是沒有遇到過，對于沒有遇到過的，就了解一下吧，說不定哪一天你就碰到了。哈。。。。：）。