IEとWebkitの違い

Question

これは見栄えの良いフォームのための私のコードです：

<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は、1つの破線の境界線から別の境界線に移動します。 IEでは、色の高さはわずか10ピクセル（またはそれ以上）で、見た目は台無しです。

これはどのように可能ですか？

Answer 1

私がしたこととその理由を簡単に説明します。コードは最後にあります。

最初の間違いは、 dl 要素内で div をクリアすることです。 dl には、 dd と dt のみを含めることができます。クリアするには、 dl の overflow を hidden に設定できます。同じ効果が得られます。これはおそらく、ページがIEで少しめちゃくちゃになっている理由です（ dl sの div 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;}