css - 为什么 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 忽略了 dt:before 的 display: block;。

Try it yourself.

是什么导致了这种行为，我怎样才能让 WebKit 的结果看起来像其他浏览器的结果？

Answer 1

它看起来像是一个 webkit 错误，但我已经使用代码 listed here. 使其正确呈现。基本上，我将 block 更改为“inline-block”并将其宽度设置为 100%。