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と、オペラ座10と上記（私は10未満のテストをしていません）、Internet Explorer 8以上は次のようにレンダリングします。

WebKitがdisplay: block;を無視したようです。dt:beforeです。

Try it yourself.

何がこの行動を起こし、そしてどのように私は他のブラウザの結果のように見えるようにWebKitの結果を得ることができますか？

Answer 1

これはWebkitのバグですが、コードを使って正しくレンダリングすることができました。listed here.基本的に、ブロックを「インラインブロック」に変更し、幅を100％にしました。