为什么WebKit浏览器不能像Gecko，Presto和Trident一样呈现此定义列表？

Question

当我使用这个HTML时：

<dl>
    <dt>term</dt>
    <dd>description</dd>
    <dt>term</dt>
    <dd>description</dd>
</dl>

这个CSS：

dl, dt, dd {
    margin: 0;
    padding: 0;
}
dt, dd {
    display: inline;
}
dt {
    font-weight: bold;
}
dt:before {
    display: block;
    content: "separator";
    font-weight: normal;
}
dt:after {
    content: ":";
}
dd {
    padding-left: 0.5em;
}

WebKit呈现如下：

但Firefox 3.5及以上版本，Opera 10及以上版本（我未在10以下测试过），而Internet Explorer 8及以上版本的渲染方式如下：

似乎WebKit忽略了display: block;的{​​{1}}。

Try it yourself.

导致此行为的原因是什么，以及如何让WebKit的结果与其他浏览器的结果一样？

Answer 1

看起来它是一个webkit错误，但我已经使用代码listed here.正确渲染它。基本上，我将块更改为'inline-block'并给它宽度为100％。