为什么并非所有的flexbox元素都像flexbox div一样？

Question

为什么flexbox与fieldset其他非div标签无法正常工作？我希望它们在div示例flex-direction: row;中排列在一起,就像在flexbox中一样.然而fieldset是力施加宽度给他们,我不明白为什么.

HTML

<fieldset>
    <div>fieldset flexbox</div>
    <div>1</div>
    <div>2</div>
</fieldset>

<div id="parentdiv">
    <div>div flexbox<div>
    <div>3</div>
    <div>4</div>
</div>

CSS:所有元素都设置为display: flex;

http://jsfiddle.net/c5BB5/1/

Answer 1

据我所知,这取决于与fieldset元素有关的浏览器错误.

这是Chrome中元素的已知问题fieldset.Firefox有一个类似的(非常古老的)问题,legend并且fieldset是替换元素.

我想现在使用a <div role="group">而不是真正的fieldset 更安全.在CSS中,您可以将其div[role='group']用作选择器.有关更多信息,请参见http://www.deque.com/aria-group-viable-alternative-fieldset-legend.