Webkit / Blink浏览器不尊重图例标签上的显示样式

Question

对于block none属性，Webkit浏览器中的图例标记似乎不接受除CSS和display之外的任何样式：

这是HTML

<legend>I should display as an inline block</legend>
<div>I should be on the same line</div>

这是CSS（将block或none以外的任何内容添加为display样式）

legend {
    display: inline-block;
    background: black;
    color: white;
    -webkit-margin-top-collapse: separate;
}

div {
    display: inline-block;
    background: blue;
    color: white;
}

当您can see in this fiddle时，图例标记将始终被设置为块状。

您还会看到，尽管我应用了-webkit-margin-top-collapse: separate，which lets one apply margins to legend tags in webkit despite a quirk，问题仍然存在。

我认为这是一个错误，虽然它没有出现在list of bugs when searching for legend中，但有人知道如何绕过它吗？

Answer 1

我能够将传奇和div与以下CSS并排。

legend {
    background: black;
    color: white;
    float:left;
}
div {
    display: inline;
    background: blue;
    color: white;
}

http://jsfiddle.net/vhNbd/4/