IE常见的CSS的BUG（一）

　　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="