違い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> 

folowing CSS

のWebKitでは

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; 
} 

（Safariなど）で不均一な行、BGと1カラー#efeは完璧に見えます。 bgcolorは1つの点線の境界から別の点に移動します。 IEでは色が10px（またはそれ以上）しかなく、見た目が乱れています。

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

Answer 1

私は何をしたのか、その理由を簡単に説明します。コードは最後です。

最初の間違いはdl要素内でdivをクリアすることです。 dlは、ddとdtを含むことができます。クリアを達成するにはdlのoverflow〜hiddenを設定することができます。同じ効果が得られます。これはおそらくあなたのページがIEでちょっと混乱しているように見えるのです（dlのdivのため）

残りは、ちょっと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：あなたが生きてREPROに

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;}