Differenza IE e Webkit
-
10-07-2019 - |
Domanda
Questo è il mio codice per un bel modulo:
<dl>
<dt class='breed'><label for="nwberichten">Fieldname</label></dt>
<dd>
Input
</dd>
<div class='clear'> </div>
</dl>
<dl class='oe'>
<dt class='breed'><label for="nwberichten">Fieldname</label></dt>
<dd>
Input
</dd>
<div class='clear'> </div>
</dl>
Con il folowing 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;
}
Nel webkit (ad esempio Safari) la riga Uneven, quella con il colore BG #efe sembra perfetta. Il bgcolor passa da un bordo tratteggiato all'altro. In IE il colore è solo 10px (o giù di lì) e l'aspetto è incasinato.
Come è possibile?
Soluzione
Spiegherò brevemente cosa ho fatto e perché. Il codice è alla fine.
Il primo errore sta usando la cancellazione di div
all'interno dell'elemento dl
. Un dl
può contenere solo dd
se dt
. Per ottenere la cancellazione puoi impostare overflow
su nascosto
per i tuoi dl
. Raggiunge lo stesso effetto. Questo è probabilmente anche il motivo per cui la tua pagina appare un po 'incasinata in IE (a causa del div
s nel dl
s)
Per il resto, ho appena ripulito un po 'il tuo 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;}