瀏覽器常見bug以及修復。
1.雙外邊距浮動bug
最常見的bug是IE 6和更低版本中的雙邊距浮動bug,這個bug使任何浮動元素上的外邊距加倍。
修復:display:inline
2. 3像素文本偏移bug
IE5和IE6上的bug,當文本與一個浮動元素相鄰時,這個bug就會表現出來。例如將一個元素向左浮動,并且不希望相鄰段落中的文本圍繞浮動元素。你可能會在段落上應用一個左外邊距。
.myFloat{
float:left;
width:200px;
}
p{
margin-left:200px;
}
如果這么做,在文本和浮動元素之間就會出現一個3像素的間隙。
修復:
p{
height:1%;
margin-left:0;
}
.myFloat{
margin-right:-3px;
}
3.IE6重復字符bug
在某些情況下,一系列浮動元素的最后一個元素中的最后幾個字符會在浮動元素下面重復出現。
當在一系列浮動元素的第一個和最后一個元素之間有多個注釋時,就會出現這個bug。前兩個注釋沒有影響,但是在后續的每個注釋會導致兩個字符重復出現。所以,3個注釋會導致連個重復字符,4個注釋會導致4個重復字符,5個注釋會導致6個重復字符。 這個bug似乎與前面的3像素bug有關。為了修復這個bug可以通過設置負的右邊距從最后一個浮動元素上去掉3像素,或者使容器擴大3像素。但是,這兩種方法可能在IE7中造成問題。
修復:從HTML中刪除注釋
4.IE6“藏貓貓”bug
一個浮動元素后面跟著一些非浮動元素,最后一個是清理元素,所有這些元素都包含在一個設置了背景顏色或圖像的父元素中。如果清理元素碰到了浮動元素,那么中間的非浮動元素看起來消失了,隱藏到了父元素的背景顏色或圖像后面,只有在刷新頁面時才重新出現。
修復:最容易的辦法是去掉父元素的背景顏色或圖像,但是,這常常是不可行的。另外一個辦法是避免清理元素與浮動元素接觸。如果容器元素應用了特定的尺寸,那么這個bug似乎就不會出現了。如果給元素指定行高,這個bug也不會出現。最后,將浮動元素和容器元素的position屬性設置為relative也會減輕這個問題。
5.相對容器中的絕對定位
IE6和更低版本在使用這個技術時會有許多bug。原因在于相對定位的元素沒有獲得IE的內部hasLayout屬性。因此,它們不創建新的定位上下文,所有絕對定位元素相對于視口進行定位。
修復:使相對定位的容器擁有布局,一種方法是在容器上顯式設置width和height。在不知道高寬的情況下可以使用條件注釋過濾IE5 IE6,為容器提供一個任意高度。
.container{
height:1%;
}
新聞熱點
疑難解答