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

posted on 2008-07-04 12:45  大斌锅  阅读(294)  评论(0)    收藏  举报