为什么不是所有的 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 元素有关的浏览器错误。

它是a known issue with fieldset elements in Chrome。 Firefox has a similar (very old) issue 其中legend 和fieldset 是replaced elements。

---

我想现在使用<div role="group"> 而不是真正的字段集更安全。在您的 CSS 中，您可以使用 div[role='group'] 作为您的选择器。请参阅http://www.deque.com/aria-group-viable-alternative-fieldset-legend 了解更多信息。