1. Double Margin
   問題狀況：IE6浮動左的時候，再設margin-left，會變成double的margin-left，此時margin的值會是設定的2倍。(浮動右時，設margin-right亦同)。
   解決方式：再加上display: inline;即可。
2. hasLayout
   問題狀況：這是IE很常見的獨門Bug，會出現區塊沒有顯示或是區塊內的組件沒有出現等類似問題。
   解決方式：遇到這類問題可以先用zoom: 1;測試區塊或區塊內的組件有沒有出現，如果有的話，代表的確是hasLayout的問題，接下來只要觸發這個區塊的hasLayout屬性即可，例如明確給定一個長或寬就可以解決了。
    
3. Firefox浮動Bug
   問題狀況：當一個區塊內含浮動左和浮動右的組件，這個區塊背景就會無法撐開。如下圖，元素1浮動左和元素2浮動右是綠色框的子組件。
   
   解決方式：在母區塊上加個overflow: auto;就可以解決，不過這時候要特別注意各個瀏覽器會不會出現scroll bar，如果要確保該區塊不會有scroll bar的話，可以把overflow設成hidden。
   

    

4. IE6多出3px
   問題狀況：IE6下同時使用圖片替換文字(Image Replacement)，加上圖片位移(CSS Sprites)技巧時，就會多出3px的其他圖片。
   解決方式：再加上overflow: hidden;即可。
   若CSS Sprites產出的圖都預留大於3px的間距，那這個hack就不需要了。

    

5. 其他常見Bug
   當遇到Bug時，可以先判斷是不是繼承或權重的問題造成的。再接下來可以把border打開，先看看是否有按照資訊流的位置排列，再來看box model是否正確，如果再不行就把code簡化到只剩下那個區塊，看看是否被其他區塊影響到。

   底下列出一些遇到bug的簡易解決方法：

/* 區塊組件無法按照自己的意思排列 */ display: inline-block; /* 區塊組件被下方的組件擋住 */ position: relative; /* 預防欄位太長撐開版面 */ overflow: hidden; /* 區塊與鄰近區塊的距離過大 */ margin: 0; padding: 0; /* IE6有時背景色不設定的話會是白色 */ background-color: transparent; /* IE6的區塊無法如預期表現時 */ zoom: 1;

相關參考內容：

• On having layout
• Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs