Webkit / Blink browsers not respecting display styling on legend tag

Question

Legend Tags in Webkit browsers seem not to accept any styling besides block and none for the CSS display property:

Here's the HTML

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

And here's the CSS (put anything other than block or none as display style)

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

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

As you can see in this fiddle, the legend tag will always be styled as a block.

You will also see that despite I applied -webkit-margin-top-collapse: separate, which lets one apply margins to legend tags in webkit despite a quirk, the problem still persists.

I reckon this is a bug although it does not appear in the list of bugs when searching for legend, but does anyone know how to circumvent it?

Answer 1

I was able to get the legend and div to go side by side with the following CSS.

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

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