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

Question

Webkit 浏览器中的 Legend 标签似乎不接受除属性之外的block任何样式：noneCSS 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;
}

正如您在这个 fiddle 中看到的那样，图例标签将始终被设置为一个块。

您还将看到，尽管我应用了 quirk -webkit-margin-top-collapse: separate，这让人们可以将边距应用于 webkit 中的图例标签，但问题仍然存在。

我认为这是一个错误，虽然在搜索 legend 时它没有出现在错误列表中，但是有人知道如何规避它吗？

Answer 1

我能够让图例和 div 与以下 CSS 并排。

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

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