区别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的（例如野生）的不均匀排，一个与BG彩色#efe看起来很完美。将bgcolor去从一个虚线框其他。 在IE中的颜色仅仅是10px的（左右）高，并且看起来被弄乱了。

这是如何实现？

Answer 1

我来简单介绍一下我做了什么，以及为什么。该代码是在末尾。

在第一错误是使用清除div S上的dl元件内部。一个dd只能包含dt S和overflow秒。为了达到清除您可以设置hidden到<=>您<=>秒。它实现同样的效果。这也可能是为什么你的页面看起来有点在IE搞砸了（因为<=> S IN的<=> S）

至于其他的，我只是清理你的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;}