1.横向双边距bug
* { margin:0; padding:0; }
.box {
float:left;
margin-left:20px;
width:200px;
height:200px;
background-color:red;
/*加*/
display:inline;
}
<!--布局-->
<div class="box"></div>
bug产生原因：margin的方向与浮动的方向相同
解决方法：浮动的元素身上加 display:inline;
2.li下面多出的4px边距
* { 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
* { 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;
}
<!--布局-->
<div class="box">
<h3></h3>
</div>
bug产生原因：IE6 对于奇数定位支持的不是很好
解决方法：在设计初期就把宽高设置为偶数
1）字体大小为奇数之边框高度少1px;
解决方法：字体大小设置为偶数或line-height为偶数;
2）line-height，文本垂直居中差1px;
解决方法：padding-top代替line-height居中，或line-height加1或减1;
3）与父标签的宽度的奇偶不同的居中造成1px的偏离.
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度 .
4.最小高度
* { margin:0; padding:0; }
div {
/*加*/
overflow:hidden;
height:0;
width:200px;
border:1px solid red;
}
<!--布局-->
<div></div>
bug产生原因：IE6 下一个div有宽度，高度最小不是0而是字体大小
解决方法：给 div height:0; 并且 overflow:hidden;
5.子级撑开父级
* { 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;
}
<!--布局-->
<div>
<h3></h3>
</div>
解决方法：给父级加 overflow:hidden;
6.IE6不支持子级margin值为负值
* { 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;
}
<!--布局-->
<div>
<h3></h3>
</div>
解决方法: 子级身上加 position:relative;
7.3像素bug
* { margin:0; padding:0; }
div, h3 {
width:200px;
height:200px;
}
div {
/*加*/
float:left;
background:#06F;
}
h3 {
/*加*/
float:left;
background:#F90;
}
<!--布局-->
<div></div>
<h3></h3>
解决方法：两个元素都浮动
8.line-height失效
* { margin:0; padding:0; }
ul {
width:500px;
margin:100px auto;
}
li {
list-style:none;
height:60px;/*改*/
line-height:50px;
border:1px solid #000;
}
/*加*/
input {
height:16px;
margin-top:22px
}
<!--布局-->
<ul>
<li>
<span>文字文字文字文字</span>
<input type="text" />
</li>
</ul>
bug产生原因：行内元素与行内块元素在同一行中，行内元素的line-height失效
解决方法：input 加 margin-top 等于 (父级高度-input高度)/2
9.png图半透明失效
/*加*/
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script> DD_belatedPNG.fix('.png');</script>
<![endif]-->
<!--布局-->
<img src="images/logo.png" class="png" >
解决方法：加一段只在IE6下执行的代码
10.注释bug
* { margin:0; padding:0; }
div {
overflow:hidden;
width:500px;
margin:100px auto;
border:1px solid red;
}
span {
float:left;
width:100%;
}
<!--布局-->
<div>
<span>ul li a span b strong</span>
<!--注释注释注释注释注释注释-->
<span>width height background</span>
<span>width height background</span>
<span>width height background</span>
<span>width height background</span>
<span>width height background</span>
<span>width height background</span>
<span>width height background</span>
</div>
bug产生原因： IE6下两个浮动元素，宽度都是width:100%，在浮动元素间加注释就会多出几个字；
解决方法：
a. 删除注释。但不彻底，浮动元素多了还是会出问题
b. 推荐：给元素加background:none;
11.不支持min-width
* { margin:0; padding:0; }
div {
float:left;
min-width:200px;
margin:100px auto;
border:10px solid red;
/*加*/
_width:200px;
white-space:nowrap;
}
<!--布局-->
<div>文字文字</div>
解决方法:利用IE6子级能撑开父级的bug，给IE6加 _width:200px; white-space:nowrap;
12.伪类hover只支持a标签的使用
div:hover{ color:yellow;}
<!--布局-->
<div>文字文字</div>
解决方法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；
13.select层级问题
* { margin:0; padding:0; }
select {
width:100px;
height:100px;
}
div {
position:absolute;
top:0; left:0;
width:200px;
height:200px; background:red;
}
<!--布局-->
<select></select>
<div></div>
解决方法：自己写一套 select 然后用 js 控制,原生的本来就不好看，且不容易修饰。
14.定位元素消失
.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;
}
<!--布局-->
<div class="box">
<div class="box1">box1</div>
/*加*/
<div></div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
bug产生原因：IE6 下定位元素与浮动元素在同一个父级下紧挨着。定位的元素会消失;
解决方法：在定位元素与浮动元素之间放一个块标签即可解决。
15.ul+li+a做导航会掉下来
* { margin:0; padding:0; }
ul {
overflow:hidden;
zoom:1;
background:red;
}
li {
display:inline;
float:left;
list-style:none;
overflow:hidden;
}
a {
display:block;
height:50px;
line-height:50px;
padding:0 50px;
/*加*/
width:100%;
}
a:hover {
background:blue;
color:#fff;
}
<!--布局-->
<ul class="clear">
<li><a href="#">首页</a></li>
<li><a href="#">身边团购</a></li>
<li><a href="#">身边外卖</a></li>
</ul>
bug 产生原因： a 标签没有 width,只有 padding 的时候,display:block就会出问题.
解决方法:给a标签加 width:100%;
16.ul浮动li不浮动
* { margin:0; padding:0; }
ul {
display:inline;
float:left;
width:200px;
border:1px solid red;
}
li {
display:inline;
/*加*/
float:left;
width:100%;
list-style:none;
}
<!--布局-->
<ul>
<li><a href="#">新闻标题新闻标题新闻标题</a></li>
<li><a href="#">新闻标题新闻标题新闻标题</a></li>
<li><a href="#">新闻标题新闻标题新闻标题</a></li>
<li><a href="#">新闻标题新闻标题新闻标题</a></li>
</ul>
bug 产生原因： ul 浮动，li没有浮动
解决方法： li 也浮动
17.躲猫猫bug
.box{
background:#0aa;
}
.float{
float:left;
border:1px solid #000;
}
.clear{
/*加*/
clear:both;
border:1px solid red;
}
<!--布局-->
<div class="box">
<div class="float">后面刮开有奖</div>
<div class="float">再来一次</div>
<div class="clear"></div>
</div>
bug产生原因:一个撑破了容器的浮动元素，如果在它之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到这些链接上时，在IE6下就会触发躲猫猫。
解决方法：
a.在未浮动的元素上添加clear: both;
b.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%。
网友评论