2011年6月，我畢業了。2012年我接觸了CSS，本以為會好過些能賺點錢了，可誰知，Internet Explorer(下稱IE)，這個前端工程師的噩夢瀏覽器讓我不再那麼好過了。各種出現在IE身上的BUG讓我頭疼。下面為了讓廣大的前端工程師能夠好過一些，我決定整理了一下有關IE瀏覽器自身的BUG問題，希望能對大家有點幫助。

　一、IE6中浮動元素的雙倍Margin的Bug

　　IE6下比較有名的BUG就是浮動元素的雙邊距BUG。這個BUG出現有三個條件：1、浮動;2、margin;3、塊元素。有了這三個條件，IE6就會出現經典的雙邊距BUG。

        CSS程式碼：

div {
	background: #95cfef;
	border: 1px solid #36f;
	float: left;
	height: 100px;
	margin: 30px 0 0 30px;
	width: 300px;
}
 

       HTML程式碼：

<div></div>

      預覽效果對比：

　　修復方法：

　　只需要改變浮動元素的第三個條件，也就是說在浮動元素中增加一個“display:inline”屬性，這樣就可以輕鬆的解決“浮動元素的雙倍Margin”的Bug。

　　二、IE6中設定元素的最小高度

　　在很多時候都會用到最高度(min-height)，但是其他瀏覽器都好說，就是IE6不支援最小高度。

        CSS程式碼：

div {
    min-height: 100px;
    height: auto !important;/*現代瀏覽器下，內容高度超過100px時自動獲得其高度*/
    height: 100px;/*此值設定和min-height值一樣，因為IE6下元素高度會根據內容自己的高度而定，所以內容高度低於min-height值時，為了達到min-height效果，需要給元素一個顯式的高度值*/
}
 

        HTML程式碼：

<div>最小高度</div>

　　三、IE6中設定元素的最小寬度

　　1、在很多時候都會用到最高度(min-height)，但是其他瀏覽器都好說，就是IE6不支援最小高度。解決的原理是針對IE6，用CSS寫一套js程式碼即可。

        CSS程式碼：

div {
	min-width:924px;
	_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<924?"924px":"");/* IE6下最小寬度的CSS表示式 */
}
 

       HTML程式碼：

<div>最小高度</div>

　　2、觸發並利用IE6-layout的怪異特性

        CSS程式碼：

.ie6-out{
	_margin-left:900px;
	_zoom:1;
}
.ie6-in{
	_position:relative;
	_float:left;
	_margin-left:-900px;
}
#min-width{
	min-width:900px;
	_zoom:1;
}

       HTML程式碼：

<div class="ie6-out">
	<div class="ie6-in">
		<div id="min-width">ie6-下，容器實現模擬min-width效果。請任意改變瀏覽器視窗大小，再點選按鈕“檢視寬度”。</div>
	</div>
</div>

   

　　四、IE6中列表li的樓梯Bug

　　li在IE6下呈樓梯狀的效果，也可以算是IE6的一個經典Bug了吧。他通常發生在li中放置了一些元素內容(比如說a)而且對其進行浮動，但li本身不浮動，此時在IE下就會有樓梯上了，具體先看下面的程式碼：

        CSS程式碼：

ul {list-style: none;}  
ul li a {  
	display: block;  
	width: 130px;  
	height: 30px; 
	float: left;  
	background: #95CFEF;  
	border: solid 1px #36F;    
}

       HTML程式碼：

<ul>  
	<li><a href="#"></a></li>  
	<li><a href="#"></a></li>  
	<li><a href="#"></a></li>  
</ul>

　　預覽效果對比：

　　修復方法：

　　修復方法一：在li元素中也加上一個浮動

ul li {float: left;}

　　修復方法二：把塊元素li變成內嵌元素，在li元素中新增“display:inline”

ul li {display: inline;}

　　五、IE6中列表li之間的空隙

　　這個Bug也是針對於li的，在IE下會無端增中li與li之間的垂直距離

        CSS程式碼：

ul {list-style: none;}  
ul li {width:130px;}
ul li a {  
	display: block;  
	width: 130px;  
	height: 30px; 
	float: left;  
	background: #95CFEF;  
	border: solid 1px #36F;    
}

       HTML程式碼：

<ul>  
	<li><a href="#"></a></li>  
	<li><a href="#"></a></li>  
	<li><a href="#"></a></li>  
</ul>

　　預覽效果對比：

        修復方法：

　　修復方法方法有很多，在這裡我只提供一種比較簡單的方法供大家參考：在li元素上新增垂直對齊方式即可。

ul li {vertical-align:top;}

　　六、IE6下無法設定元素的微高

　　在Web頁面中很多時候高度會很小，這時候在IE6下並不能實現。

        CSS程式碼：

div {
	background:red;
	height:2px;
}

        HTML程式碼：

<div></div>

　　預覽效果對比：

        修復方法：

　　在div元素中新增“overflow: hidden;”即可。

overflow: hidden;

　　七、IE6和IE7下overflow:auto與position:relative的碰撞

　　這個Bug也叫作“距出邊界的Bug”,而這個Bug 只出現在 IE6 和 IE7 中,有兩個塊元素,元素設定了 overflow: auto;子元素設定 position:relative 並且其高度大於父元素,在 IE6 和 IE7 中會產生一個比較難看的 Bug,也就是子元素 塊不被隱藏會溢位父元素塊,而現代瀏覽器都顯示正常。

        CSS程式碼：

.wrap {
	border: 1px solid red;
	height: 150px;
	width: 200px;
	background: orange;
	overflow: auto;
}
.subDiv {
	border: 1px dotted blue;
	background: lime;
	height: 200px;
	width: 150px;
	position: relative;
}

        HTML程式碼：

<div class="wrap">
	<div class="subDiv"></div>
</div>

        預覽效果對比：

        修復方法：

　　這是一個overflow 在IE7~IE6 的bug,不單單隻取值auto 會出現這個Bug,就是你設定overflow: hidden 也會出現這個Bug。解決方法也是隻要在父元素中加入一個position: relative;就 OK 了。要解決這個難看的Bug 我們只要在父元素中也設定一個position:relative;屬性,就會使 IE6 和 IE7 回覆到正常狀態。

position: relative;

　　八、IE6浮動層錯位（雙邊距BUG）

　　當內容超出外包容器定義的寬度時會導致浮動層錯位問題。在 Firefox、IE7、IE8 及其他標準瀏覽 器裡,超出的內容僅僅只是超出邊緣;但在 IE6 中容器會忽 視定義的 width 值,寬度會錯誤地隨內 容寬度增長而增長。如果在這個浮動元素之後還跟著一個 浮動元素,那麼就會導致錯位問題

        CSS程式碼：

#container{  
	background: #C2DFEF;  
	border: solid 1px #36F;  
	width: 365px;  
	margin: 30px;  
	padding: 5px;  
	overflow: auto;  
}
#left, 
#right{  
	background: #95CFEF;  
	border: solid 1px #36F;  
	width: 100px;  
	height: 150px;  
	margin: 30px;  
	padding: 10px;
	float: left;  
}

        HTML程式碼：

<div id="container">  
	<div id="left">夢龍小站</div>  
	<div id="right"></div>  
</div>

        預覽效果對比：

        修復方法：

　　把left和right轉換成內嵌元素即可

#left, 
#right { display:inline; }

　　九、IE6下消失的元素

　　在上面的基礎上追加一個典型的IE6 bug:IE6中絕對定位、浮動元素混用時的BUG。一個內容區塊，其中包含兩個浮動的box，外加一個絕對定位的box，設定如下樣式時會發生IE6浮動元素消失的BUG。

        CSS程式碼：

*{ padding:0; margin:0;}
.all{width:400px;}
.top{position:absolute; left:0; top:0; width:400px; height:50px; background:red;}
.left{float:left; width:200px; height:100px; background:green;}
.right{float:left;width:200px; height:100px; background:yellow;}

        HTML程式碼：

<div class="all">
  <div class="top">夢龍小站1</div>
  <div class="left">夢龍小站2</div>
  <div class="right">夢龍小站3</div>
</div>

        預覽效果對比：

        修復方法：

　　解決的方法有很多，在這裡，我只說一種比較簡單快速的方法。給all加一個display:inline樣式可解決。

display:inline;

       

　　以上便是今天為大家介紹的有關IE6的那些BUG，希望能對大家有所幫助。