984
技術社區[雲棲]
精通css（9）bug和修複bug
瀏覽器bug和不一致的顯示方式是大多數CSS開發人員麵臨的主要問題。本文就bug問題作一些學習。
1.bug來源於自己
如果你寫的布局跟你想象的不太一致，不要以為這是瀏覽器bug，首先應該想象是不是自己的問題。要麼手賤忘了寫";"或者把單詞拚錯了，要麼是自己對css理解還不夠。
2.IE中的bug
IE上的bug無疑是眾多瀏覽器中最多的，這主要是它的顯示引擎使用了layout（布局）。這是許多IE/Win顯示bug的根源，所以理解layout概念還是很重要的。
2.1何為layout
layout是IE特有的，並非CSS的屬性。IE使用layout來控製元素的尺寸和定位。那些擁有布局（have layout）的元素負責本身及其子元素的尺寸設置和定位。如果一個元素don't have layout，它的尺寸和位置就由最近的have layout的祖先元素控製。
默認情況下have layout的元素有body,html(標準模式中),table,tr,td,img,hr,input,select,textarea,button,iframe,embed,object,applet,marquee。可以使用JS的hasLayout函數來查看一個元素是否have layout。
另外，設置以下css屬性會使元素have layout：
float:left/right;
display:inline-block;
width/height/zoom:任何值;
IE7中，以下屬性也可以觸發布局：
max-width:除none以外;
min-width:任何值;
overflow:hidden,scroll,auto;
2.2 layout帶來的問題
1.IE6以下，如果段落have layout，那麼就會限製為矩形，阻止了文本圍繞浮動元素；
2.have layout的元素，如果子元素內容比自己還大，該元素會自動擴張，其width屬性更像是min-width屬性；
3.have layout的元素不會收縮；
4.對浮動元素自動清理；
5.相對定位元素don't have layout；
6,have layout的元素之間外邊距不會疊加！嗬嗬；
7.在don't have layout的塊級鏈接上單擊，隻會覆蓋文本區域；
8.在滾動時，列表項上的背景圖像間歇性的顯示或消失.
許多IE的bug都可以通過觸發layout來修複，IE7對layout的一些bug進行了修複，但還是使用layout顯示引擎。直到IE8，才使用全新的顯示引擎。
2.3修複bug
你可以使用條件注釋，使用hack，使用過濾器，但這都是不到萬不得已的情況下不會使用的方法。
2.3.1雙外邊距浮動bug
2.3.2 3像素文本偏移bug
2.3.3 IE6重複字符bug
2.3.4 IE6”藏貓貓“bug
2.3.5相對容器中的絕對定位
相信隨著wb技術的發展，IE的進化終將讓我們遺忘這些特有的Bug。
最後更新：2017-04-03 05:39:40