différence IE et Webkit

Question

Ceci est mon code pour une forme looking nice:

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

Avec le CSS folowing

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 (par exemple Safari) la ligne Accidenté, celui avec le BG la couleur #efe semble parfaite. Le bgcolor passe d'une bordure pointillée à l'autre. Dans IE la couleur est seulement 10px (ou plus) et l'apparence est foiré.

Comment est-ce possible?

Answer 1

Je vais expliquer brièvement ce que j'ai fait et pourquoi. Le code est à la fin.

La première erreur utilise l'effacement div s à l'intérieur de l'élément dl. Un dl ne peut contenir que dd s et dt s. Pour effectuer la compensation, vous pouvez définir overflow à hidden pour votre dl s. Il réalise le même effet. C'est aussi probablement pourquoi votre page semble un peu foiré dans IE (à cause du div s dans les dl s)

Pour le reste, j'ai juste nettoyé votre CSS un peu.

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