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

Question

Webkit 浏览器中的 Legend 标签似乎不接受除 block 和 none 之外的任何样式用于 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 , legend 标签将始终被设置为 block 的样式。

您还会看到，尽管我应用了 -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/