Diferença IE e Webkit
-
10-07-2019 - |
Pergunta
Este é meu código para uma forma agradável à vista:
<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>
Com o 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;
}
Em webkit (por exemplo, Safari) A linha irregular, aquele com a BG cor #efe parece perfeito. O bgcolor vai de uma borda tracejada para o outro. No IE a cor só é 10px (ou assim) de altura e os olhares estão bagunçados.
Como é isto possível?
Solução
Vou explicar brevemente o que eu fiz e porquê. O código está no fim.
O primeiro erro está usando div
s compensação dentro do elemento dl
. A dl
só pode conter dd
s e dt
s. Para conseguir limpar você pode definir overflow
para hidden
para seus dl
s. Ele alcança o mesmo efeito. Esta é também provavelmente porque sua página parece um pouco confuso no IE (por causa dos div
s nas dl
s)
Quanto ao resto, eu só limparam o seu CSS um pouco.
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;}