Почему браузеры 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; из dt:before.

Попробуйте сами.

Что вызывает такое поведение и как я могу получить результат WebKit выглядетьрезультаты других браузеров?

Answer 1

Похоже, что это ошибка webkit, но я получил ее для правильного рендеринга, используя код , указанный здесь. По сути, я изменил блок на 'inline-block' и присвоил ему ширину 100% .