IE6下9种常见bug及解决方法（翻译转载）

这篇文章是我目前发现的关于ie6 bug比较全面的一篇，解读也比较详细，地址如下

 

E文好的戳这里

 

问题一 居中布局

居中是网页布局中最常见的一种方式，最方便的方法是通过 margin:auto; 来实现，这个方法不论屏幕分辨率和浏览器宽度如何都很好用。但是怪异模式下的IE6 用了一种很悲剧的方式去解决这个属性，那就是不去管它。

看下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#container{
    border: solid 1px #000;
    background: #777;
    width: 400px;
    height: 160px;
    margin: 30px 0 0 30px;
}
                                                                                                                                                    
#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 100px;
    margin: 30px auto;
                                                                                                                                                        
}

 

你期望的输出是这样的：

而实际上IE6是这样的：

成因：IE6诡异模式被激活，margin的auto属性未被识别

解决方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#container{
    border: solid 1px #000;
    background: #777;
    width: 400px;
    height: 160px;
    margin: 30px 0 0 30px;
       text-align: center;
}
                                                                                                                                 
#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 100px;
    margin: 30px 0;
       text-align: left;
                                                                                                                                     
}

为父元素添加 text-align:center 使子元素居中，子元素添加 text-align:left,以保证子元素对齐正确

 

 问题2：楼梯状错位

使用<li>元素做导航，里面通常放置<a>并使其浮动，IE6对他的解读比较复杂，代码如下

1
2
3
4
5
<ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul {
    list-style: none;
}
                                                                                                                       
ul li a {
    display: block;
    width: 130px;
    height: 30px;
    text-align: center;
    color: #fff;
    float: left;
    background: #95CFEF;
    border: solid 1px #36F;
    margin: 30px 5px;
}

正常及IE下的状态：

解决方法两个：

1 ：让li浮动，而不是里面的a

1
2
3
ul li {
    float: left;
}

2：给li inline属性（同样可以解决双倍margin的问题），尽可能地避免block元素放到inline元素内部

1
2
3
ul li {
    display: inline
}

 

问题3：浮动元素的双倍margin

这个问题对于ie6很常见，浮动元素给予了和浮动方向一致的margin会触发这个bug，margin会被双倍渲染

1
2
3
4
5
6
7
8
#element{
    background: #95CFEF;
    width: 300px;
    height: 100px;
    float: left;
    margin: 30px 0 0 30px;
    border: solid 1px #36F;
}

解决方法 display:inline

1
2
3
4
5
6
7
8
9
#element{
    background: #95CFEF;
    width: 300px;
    height: 100px;
    float: left;
    margin: 30px 0 0 30px;
    border: solid 1px #36F;
    display: inline;
}

问题4：无法使元素获得很小的高度

 

布局的时候有时候需要很小的高度，比如自定义边界，但你看页面的时候会发现ie6解读成双倍的高度

1
2
3
4
5
6
7
#element{ 
    background: #95CFEF; 
    border: solid 1px #36F; 
    width: 300px; 
    height: 2px;     
    margin: 30px 0; 
}

成因：ie不允许元素的高度小于内部fontsize，所以解决方法一是让这个元素的font-size 为0

1
2
3
4
5
6
7
8
#element{ 
    background: #95CFEF; 
    border: solid 1px #36F; 
    width: 300px; 
    height: 2px;     
    margin: 30px 0; 
        font-size: 0; 
}

解决方法2：overflow: hidden让多出的部分隐藏

1
2
3
4
5
6
7
8
#element{ 
    background: #95CFEF; 
    border: solid 1px #36F; 
    width: 300px; 
    height: 2px;     
    margin: 30px 0; 
        overflow: hidden
}

 

问题5：overflow auto 元素内部的relative 元素 溢出

1
<div id="element"><div id="anotherelement"></div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 150px; 
    margin: 30px 0;
    overflow: auto;
}
                                                                                       
#anotherelement{
    background: #555;
    width: 150px;
    height: 175px; 
    position: relative;
    margin: 30px;
}

解决办法：让父元素也relative；

1
2
3
4
5
6
7
8
9
#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 150px; 
    margin: 30px 0;
    overflow: auto;
        position: relative;
}

 

问题6：盒模式（box-model） 的宽高解读异常

 

插入：

盒模式的宽度解读如下：

 

实际渲染的宽高 = width/height + padding + border

 

ie6怪异模式下渲染的宽高 = width/height(就是说padding和border被解读到宽高里面了)

 

原文给出了css-hack的方法修改了IE5/6的高宽值，增加了正常状态下的padding值

1
2
3
4
5
#element{
    width: 400px;
        height: 150px; 
    padding: 50px;
}
1
2
3
4
5
6
#element { 
    width: 400px; 
    height: 150px;   
   \height: 250px;  
   \width: 500px
}

问题7:min-width, min-height  IE6不识别

解决方法1：Dustin Diaz这货的Hack方法（使用挺广的 *译者）

1
2
3
4
5
#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

解决方法2：利用IE6无法使用子类选择符的特点

1
2
3
4
5
6
7
8
#element {
    min-height: 150px;
    height: 150px;
}
                                              
html>body #element {
    height: auto;
}

问题8：浮动布局异常错位

浮动元素内部元素的宽度大于浮动元素宽度，IE6会自动修正父元素的宽度，导致浮动错位。

*译者：一些莫名其妙的错位问题，可以采用一次删一半html的方式查找是不是内部的文字或者图片超过了父元素的宽度。

1
2
3
4
<div id="container">
    <div id="element">http://net.tutsplus.com/</div>
    <div id="anotherelement"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#element, #anotherelement{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 100px;
    height: 150px; 
    margin: 30px;
    padding: 10px;
    float: left;
}
                              
#container{
    background: #C2DFEF;
    border: solid 1px #36F;
    width: 365px;  
    margin: 30px;
    padding: 5px;
    overflow: auto;
}

 

 

修正方式：

还没什么完美的办法去解决，使用overflow：hidden貌似是唯一的办法，但多出来的内容会被隐藏掉。

*译者：如果是英文文字的过宽，是否可以采用word-wrap:break-word; 有待验证

1
2
3
4
5
6
7
8
#element{
    background: #C2DFEF;
    border: solid 1px #36F;
    width: 365px;  
    margin: 30px;
    padding: 5px;
    overflow: hidden;
}

问题9：列表元素的垂直间距

IE6默认的列表元素之间会有间隙

1
2
3
4
5
<ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
ul {
    margin:0;
    padding:0;
    list-style:none;
}
                      
li a {
    background: #95CFEF;
    display: block;
}

posted on 2013-10-17 11:19  fishenal  阅读(229)  评论(0)    收藏  举报