为什么并非所有 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

是替换元素。

---

我想现在使用

<div role="group">

而不是真正的字段集更安全。在 CSS 中，您可以使用

div[role='group']

作为选择器。请参阅 http://www.deque.com/aria-group-viable-alternative-fieldset-legend 了解更多信息。

Answer 2

此错误已在 Chrome #40366646 和 Firefox #1230207 中修复。问题中的代码片段现在可以在主要浏览器中按预期工作。