css - 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 从一个虚线边框变为另一个虚线边框。 在 IE 中，颜色只有 10px(左右)高，而且看起来很乱。

这怎么可能？

Answer 1

我将简要说明我做了什么以及为什么这样做。代码在最后。

第一个错误是使用清除 dl 元素内的 div。 dl 只能包含 dd 和 dt。要实现清除，您可以将 dl 的 overflow 设置为 hidden。它达到了同样的效果。这也可能是您的页面在 IE 中看起来有点困惑的原因(因为 dl 中的 div)

至于剩下的，我只是稍微清理了一下你的 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;}