CSS Bug汇总
学了几天的CSS，就让我这个菜鸟把CSS Bug一下子吧！
1. 3px Bug
描述：IE下两个div之间会出现3个像素的Bug，这个bug是在当对一个div用了float元素时，而div未使用时则会出现。
解决方法：a.对另一个元素同时使用float； b.为已经浮动的div添加一条语句：margin-right:-3px; 或者margin-left:-3px; ；
例子：
<html>
<head><title>IE 3px Bug</title></title>
<style type="text/css">
<!--
body {
color:#fff;
}
.main {
background: #CCC;
border: solid 1px #000;
}
.left {
width:100px;
height:100px;
background:#444;
float:left;
}
.right{
width:100px;
height:100px;
background:#000;
}
-->
</style>
</head>
<body>
<div class=main>
<div class=left>
left
</div>
<div class=right>
right
</div>
</div>
</body>
</html>
以上是存在3px bug的代码，我们可以在.right中加入一条语句：float:left; 或者是在.left中加入margin-right:-3px;解决这个Bug。
2.Peek-a-boo Bug
描述：在一个液态的（liquid）的盒内，跟在一个浮动的元素后的内容会莫名其妙消失（只有IE6会发生）。
解决方法：给该盒定义height: 1%;（但要注意对IE 5.x/Mac隐藏）。代码如下：
/*\*/ * html div {
height: 1%;
}/**/
著名的Holly Hack（救世hack？神圣hack？）。它通过给一个块设置一个十分小的高度值（1%几乎成了通用准则）来工作。但IE 5+Win能够依据内容来扩展这个盒子到足够的高度，就是说，把height当作min-height来用。在大部分情况下，Holly Hack能够使IE5+/Win按照实质的行为来表现。
3.Double Margin Bug
描述：当对一个元素设置浮动后，并同时设置了边距，那么就会出现该Bug。导致浮动对象的相同方向上的边距是设置值得两倍。
解决方法：对该元素使用display:inline; ；
4.min-height attribute ignored in IE
描述：对IE设置min-height，IE会直接忽略。在IE7中则是固定的（fixed）。
解决方法：使用如下CSS Hack：
* html #content {
min-height: 200px;
}
/* Internet Explorer *
/*\*/
* html #content {
height: 200px;
}
/**/
5.Disappearing List Background Bug
描述：当列表项设置了背景颜色或者是北京图像时候，而此时列表项被一个浮动元素包含，且该浮动元素使用了相对定位时，那么制定的背景颜色或者图像可能不会呈现。
解决方法：为列表项使用相对定位，如ul, ol, dl { position: relative; }。
6.Three-pixel text jog
描述：当line boxes包含了邻近的浮动元素line text或者图像等其他元素时，在line-box和浮动的边缘会出现3像素的间隔。
解决方法：为该元素使用Holly Hack（即以上2中的代码）或者使用zoom属性：
<!--[if IE]>
<style type="text/css">
.mybuggyelement { zoom: 1;}
</style>
<![endif]-->
还有许多Bug，就不一一例举，总结自己的经验，就是如果元素设置了浮动，那么请给它的下级元素也设置浮动；浮动元素要及时清除（clear:both;）；编写CSS代码注意非零值得时候一定要有单位，如果是零可以省略单位。以上是自己总结，如果有不对的地方还请大家指正。同时可以上adobe的官方网站查看CSS Bug：http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=1&loc=en_US
浙公网安备 33010602011771号