區別IE和Webkit

這是我的一個很好看的表單代碼：區別IE和Webkit

<dl> 
    <dt class='breed'><label for="nwberichten">Fieldname</label></dt> 
    <dd> 
     Input 
    </dd> 
    <div class='clear'>&nbsp;</div> 
</dl> 
<dl class='oe'> 
     <dt class='breed'><label for="nwberichten">Fieldname</label></dt> 
     <dd> 
      Input 
     </dd> 
     <div class='clear'>&nbsp;</div> 
    </dl>

隨着如下因素CSS

dl {margin-top:0px;} 
dt {float:left; text-align:right; width:120px; line-height:25px; margin:0 10px 10px 0;} 
dd {float:left; width:400px; line-height:25px; margin:0 0 10px 0;} 
DL { 
    border-bottom:1px dashed #aaa; 
    margin:0px; 
    line-height:20px; 
    padding-top:6px;; 
} 

DL DD { 
    line-height:20px; 
    background:transparent; 
} 
DT { 
    line-height:20px; 
    background:transparent; 
} 
DL.oe { 
    background:#efe; 
}

在WebKit的（如Safari瀏覽器）的不均勻排，一個與BG顏色#efe看起來很完美。 bgcolor從一個虛線邊框到另一個虛線邊框。在IE中，顏色只有10px（左右）高，外觀混亂。

這怎麼可能？

來源

2009-08-03 blub

你能鏈接到現場攝製？如果我們可以在瀏覽器中加載頁面，調試會更容易。 – Sander 2009-08-03 09:05:27

這也可以不用'

'來實現，並且會稍微更加語義化。 – You 2009-08-03 10:53:55

我將簡要解釋我做了什麼以及爲什麼。代碼在最後。

第一個錯誤是在dl元素內部使用清除div s。 A dl只能包含dd s和dt s。要實現清算，您可以爲dl s設置overflow至hidden。它達到了同樣的效果。這也可能是爲什麼你的頁面看起來有點在IE中搞砸（因爲s在dl s）

至於其餘的，我剛剛清理你的CSS一點。

HTML：

<dl> 
    <dt class="breed"><label for="nwberichten">Fieldname</label></dt> 
    <dd> 
     Input 
    </dd> 
</dl> 
<dl class="oe"> 
    <dt class="breed"><label for="nwberichten">Fieldname</label></dt> 
    <dd> 
     Input 
    </dd> 
</dl>

CSS：

dl { margin:0; padding-top:6px; overflow:hidden; border-bottom:1px dashed #aaa; } 
dl.oe { background:#efe; } 
dt, dd { float:left; line-height:25px; background:transparent; } 
dt { text-align:right; width:120px; margin:0 10px 10px 0;} 
dd { width:400px; margin:0 0 10px 0;}

來源

2009-08-03 09:14:04

區別IE和Webkit

回答

相關問題