Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

CSS Bug


  1. 問題狀況:IE6浮動左的時候,再設margin-left,會變成double的margin-left,此時margin的值會是設定的2倍。(浮動右時,設margin-right亦同)。
    解決方式:再加上display: inline;即可。

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

     


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

     

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

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

  6. /* 區塊組件無法按照自己的意思排列 */
    display: inline-block;

    /* 區塊組件被下方的組件擋住 */
    position: relative;

    /* 預防欄位太長撐開版面 */
    overflow: hidden;

    /* 區塊與鄰近區塊的距離過大 */
    margin: 0;
    padding: 0;

    /* IE6有時背景色不設定的話會是白色 */
    background-color: transparent;

    /* IE6的區塊無法如預期表現時 */

    zoom: 1;

相關參考內容:

Leave a Reply

*