學了幾天的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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
