【bug日記】IE瀏覽器常見的9個css Bug以及解決辦法
阿新 • • 發佈：2019-02-14
學了幾天的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程式碼注意非零值得時候一定要有單位，如果是零可以省略單位。以上是自己總結，如果有不對的地方還請大家指正。
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程式碼注意非零值得時候一定要有單位，如果是零可以省略單位。以上是自己總結，如果有不對的地方還請大家指正。