IE6的兼容性问题一直都是前端工程师的恶梦，为了早早脱离这种困境，小小的整理了一些相关兼容性的知识，感兴趣的朋友可以参考下哈，希望可以帮助到你。
1、双边距
<style>
* { margin:0; padding:0; }
.box { float:left; margin-left:20px; width:200px; height:200px; background-color:red; }
</style>
<body>
<div class="box"></div>
</body>
bug产生原因
margin的方向与浮动的方向相同
解决方法：
浮动的元素身上加 display:inline;
2、li下面多出来的边距
<style>
* { 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; }
</style>
<body>
<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>
</body>
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>
<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>
<body>
<div></div>
</body>
bug产生原因
IE6 下一个div有宽度，高度最小不是0而是字体大小
解决方法：
给 div height:0; 并且 overflow:hidden;
5、IE6子级撑开父级
<style>
div { overflow:hidden; width:200px; height:200px; margin:100px auto; border:10px solid red; }
h3 { width:300px; height:300px; background:yellow; }
</style>
<body>
<div>
<h3></h3>
</div>
</body>
解决方法:
给父级 overflow:hidden;
6、IE6不支持自己margin负值
<style>
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>
<body>
<div>
<h3></h3>
</div>
</body>
解决方法:
子级身上加 position:relative;
7、IE6下3像素bug
<style>
div, h3 { width:200px; height:200px; }
div { float:left; background:#06F; }
h3 { float:left; background:#F90; }
</style>
<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>
<body>
<ul>
<li><span>文字文字文字文字</span><input type="text" /></li>
</ul>
</body>
产生原因：
行内元素与行内块元素在同一行中，行内元素的line-height失效
解决方法：
input 加 margin-top 等于 (父级高度-input高度)/2
9、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>
<body>
<select></select>
<div>
</div>
</body>
解决方法：
自己写一套 select 然后用 js 控制
原生的本来就不好看，而不容易修饰
10、IE6下定位元素消失
<style>
* { margin:0; padding:0; }
.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>
<body>
<div class="box">
<div class="box1">box1</div>
<div></div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
产生原因：
IE6 下，定位元素与浮动元素在同一个父级下紧挨着。定位的元素会消失
解决方法：
在定位元素与浮动元素之间放一个块标签即可解决。
11、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>
<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就会出问题
12、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>
<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 也浮动
网友评论