前端开发IE6中css的BUG统计

程序员最讨厌的就是反复的修复查找BUG，，，，，特别是万恶的IE6，不过没办法，改修复还是修复处理，谁让我们干的是这一行呢。。下面鹏哥就来统计一下ie6中我们经常遇到的CSS问题。不过目前基本都不需要兼容IE6了，甚至js严格模式直接放弃IE系列，，而且ES6，H5，CSS3基本也就兼容IE高版本。不废话，直接上代码。

1.双边距BUG：

* { margin:0; padding:0; }
.box { float:left; margin-left:20px; width:200px; height:200px; background-color:red; }

<div class="box"></div>


/*
    bug产生原因
        margin的方向与浮动的方向相同
        
    解决方法：
        浮动的元素身上加 display:inline;
*/

2.li标签下面多出的边距：

* { margin:0; padding:0; }
ul { width:500px; margin:100px auto; background:green; }
li { list-style:none; overflow:hidden; width:100%; background:#39F; vertical-align:top; }
.left { float:left; height:200px; width:200px; background:#F63; }


<ul>
        <li>
            <div class="left"></div>
        </li>
        
        <li>
            <div class="left"></div>
        </li>
        
        <li>
            <div class="left"></div>
        </li>
        
        <li>
            <div class="left"></div>
        </li>
        
        <li>
            <div class="left"></div>
        </li>
    </ul>


/*
    bug产生原因
        li 中有浮动的元素
        
    解决方法：
        li 加上 vertical-align:top;
*/

3.单像素BUG：

<style>
* { margin:0; padding:0; }
.box { position:relative; width:501px; height:501px; margin:100px auto; background:red; }
h3 { position:absolute; right:0; bottom:0; width:100px; height:100px; background:#33C; }

</style>
</head>

<body>
    <div class="box"> 
        <h3></h3>
    </div>

</body>


/*
    bug产生原因
        IE6 对于奇数定位支持的不是很好
        
    解决方法：
        在设计初期就把宽高设置为偶数
*/

4.IE6最小高度：

<style>
* { margin:0; padding:0; }
div { overflow:hidden; width:200px; height:0; border:1px solid red; }

</style>
</head>

<body>
    <div></div>

</body>


/*
    bug产生原因
        IE6 下一个div有宽度，高度最小不是0而是字体大小
        
    解决方法：
        给 div height:0; 并且 overflow:hidden;
*/

5.IE6子级撑开父级：

<style>
* { margin:0; padding:0; }
div { overflow:hidden; width:200px; height:200px; margin:100px auto; border:10px solid red; }
h3 { width:300px; height:300px; background:yellow; }

</style>
</head>

<body>
    <div>
        <h3></h3>
    </div>

</body>


/*
    解决方法:
        给父级 overflow:hidden;
        
*/

6.IE6不支持子级的margin

<style>
* { margin:0; padding:0; }
div { width:200px; height:200px; margin:100px auto; border:10px solid red; }
h3 { width:100px; height:100px; margin-left:-50px; background:#33C; position:relative; }

</style>
</head>

<body>
    <div><h3></h3></div>
</body>


/*
    解决方法:
        子级身上加 position:relative;
*/

7.IE6下3像素BUG：

<style>
* { margin:0; padding:0; }
div, h3 { width:200px; height:200px; }
div { float:left; background:#06F; }
h3 { float:left; background:#F90; }

</style>
</head>

<body>
    <div></div><h3></h3>
</body>


/*
    解决方法：
        两个元素都浮动就好
*/

8.IE6下line-height失效：

<style>
* { margin:0; padding:0; }
ul { width:500px; margin:100px auto; }
li { list-style:none; height:50px; line-height:50px; border:1px solid #000; }
input { height:16px; margin-top:16px; }

</style>
</head>

<body>
    <ul>
        <li><span>文字文字文字文字</span><input type="text" /></li>
    </ul>

</body>


/*
    产生原因：
        行内元素与行内块元素在同一行中，行内元素的line-height失效
    
    解决方法：
        input 加 margin-top 等于 (父级高度-input高度)/2
*/

9.IE6下png半透明失效：


</head>

<body>
    ![](images/logo.png)
</body>



<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png');
</script>
<![endif]-->

10.select层级问题：

<style>
* { margin:0; padding:0; }
select { width:100px; height:100px; }
div { position:absolute; top:0; left:0;  width:200px; height:200px; background:red; }

</style>
</head>

<body>
    <select></select>
    <div>
    </div>
</body>


/*
    解决方法：
        自己写一套 select 然后用 js 控制
        原生的本来就不好看，而不容易修饰
*/

11.IE6下定位元素消失：

<style type="text/css">
.box { width:600px; height: 50px; color:#fff; border: 1px solid red; zoom:1; position: relative; }
.box:after { display:block; content:''; clear: both; }
.box div { font-size:50px; }
.box1 { position:absolute; left:0; top:0; width:500px; height:50px; background:#f0f; }
.box2 { overflow: hidden; display:inline; float:left; width:300px; height:30px; background:red; }
.box3 { overflow: hidden; display:inline; float:left; width:300px; height:30px; background:blue;}

</style>
</head>

<body>
    <div class="box">
        <div class="box1">box1</div>
        <div></div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>


/*
    IE6 下，定位元素与浮动元素在同一个父级下紧挨着。定位的元素会消失
    解决方法：
        在定位元素与浮动元素之间放一个块标签即可解决。
*/

12.UL+LI+a做导航掉下来：

<style>
* { margin:0; padding:0; }
ul { overflow:hidden; zoom:1; background:red; }
li { display:inline; float:left; list-style:none; }
a { float:left; height:50px; line-height:50px; padding:0 50px; }
a:hover {
    background:blue;
    color:#fff; 
}

</style>
</head>

<body>
    <ul class="clear">
        <li><a href="#">首页</a></li>
        <li><a href="#">身边团购</a></li>
        <li><a href="#">身边外卖</a></li>
    </ul>
</body>


/*
    bug 产生原因：
        a 标签没有 width ，只有 padding 的时候，display:block就会出问题
*/

13.Ul浮动li不浮动出现的问题：

<style>
* { margin:0; padding:0; }
ul {
    display:inline;
    float:left;
    width:200px;
    border:1px solid red;
    font-size:12px;
}
li {
    display:inline;
    float:left;
    width:100%;
    list-style:none;
}

</style>
</head>

<body>
    <ul>
        <li><a href="#">新闻标题新闻标题新闻标题</a></li>
        <li><a href="#">新闻标题新闻标题新闻标题</a></li>
        <li><a href="#">新闻标题新闻标题新闻标题</a></li>
        <li><a href="#">新闻标题新闻标题新闻标题</a></li>
    </ul>
</body>


/*
    bug 产生原因：
        ul 浮动，li没有浮动
        
    解决方法： 
        li 也浮动 
*/

目前就这么多，前面鹏哥也发过js兼容性问题的文章，喜欢的朋友可以去看下。以上结束。