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

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

WebKit (예 : Safari)에서 불균일 한 행은 BG 색상 #EFE를 가진 줄이 완벽 해 보입니다. bgcolor는 한쪽 테두리에서 다른 경계로갑니다. 즉, 색상은 10px (또는 그대로) 높이이며 외관은 엉망입니다.

이것이 어떻게 가능한지?

Answer 1

내가 한 일과 이유를 간단히 설명하겠습니다. 코드는 끝에 있습니다.

첫 번째 실수는 청소를 사용하는 것입니다 div내부 dl 요소. ㅏ dl 만 포함 할 수 있습니다 dd모래 dt에스. 청산을 달성하려면 설정할 수 있습니다 overflow 에게 hidden 당신을 위해 dl에스. 동일한 효과를 달성합니다. 이것은 아마도 당신의 페이지가 IE에서 약간 엉망인 것처럼 보일 것입니다. divs에서 dl에스)

나머지는 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;}