Diferencia IE y Webkit

Question

Este es mi código para una forma atractiva:

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

Con el siguiente 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;
}

En webkit (por ejemplo, Safari) la fila desigual, la que tiene el color BG #efe se ve perfecta. El bgcolor va de un borde discontinuo al otro. En IE, el color tiene solo 10px (más o menos) de altura y el aspecto está desordenado.

¿Cómo es esto posible?

Answer 1

Explicaré brevemente lo que hice y por qué. El código está al final.

El primer error es usar borrar div s dentro del elemento dl . Un dl solo puede contener dd sy dt s. Para lograr la limpieza, puede establecer overflow en hidden para sus dl s. Logra el mismo efecto. Probablemente también sea por eso que su página se ve un poco desordenada en IE (debido a los div s en los dl s)

En cuanto al resto, acabo de limpiar un poco tu 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;}