前端开发IE6中css的BUG统计
2017-03-20 本文已影响57人
虚幻的锈色
程序员最讨厌的就是反复的修复查找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>
</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兼容性问题的文章，喜欢的朋友可以去看下。以上结束。
