IE常见的CSS的BUG（一）

左手的ㄟ右手 2022-11-29 12:30 188阅读 0赞

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代码：*

*预览效果对比：*

![IE6双边距BUG][IE6_BUG]

*修复方法：*

只需要改变浮动元素的第三个条件，也就是说在浮动元素中增加一个“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代码：*

**三、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代码：*

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代码：*

*预览效果对比：*

![列表li楼梯BUG][li_BUG]

*修复方法：*

修复方法一：在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代码：*

*预览效果对比：*

![li空白间距][li]

*修复方法：*

修复方法方法有很多，在这里我只提供一种比较简单的方法供大家参考：在li元素上添加垂直对齐方式即可。

ul li {vertical-align:top;}

**六、IE6下无法设置元素的微高**

在Web页面中很多时候高度会很小，这时候在IE6下并不能实现。

*CSS代码：*

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

*HTML代码：*

*预览效果对比：*

![IE6下无法设置元素的微高][IE6]

*修复方法：*

在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代码：*

*预览效果对比：*

![SouthEast][]

*修复方法：*

这是一个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代码：*

*预览效果对比：*

![SouthEast 1][]

*修复方法：*

把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代码：*

*预览效果对比：*

![SouthEast 2][]

*修复方法：*

解决的方法有很多，在这里，我只说一种比较简单快速的方法。给all加一个display:inline样式可解决。

display:inline;

以上便是今天为大家介绍的有关IE6的那些BUG，希望能对大家有所帮助。

[IE6_BUG]: /images/20221124/bb7a75294743425884dc875a2c0006b4.png
[li_BUG]: /images/20221124/43a0287be7934ff2b28b6a5cfdb4a6ec.png
[li]: /images/20221124/97f02eb8f45b484d95cd75f8a5adfee9.png
[IE6]: /images/20221124/be333545cb424da299c70ddd2cc6c79c.png
[SouthEast]: /images/20221124/8f38ba5f1e70434caace19c5f4d0604f.png
[SouthEast 1]: /images/20221124/7eefb2cb5c174f41bd2686bdace29375.png
[SouthEast 2]: /images/20221124/8c09e879a3c74bdab5a0515adacfb654.png