为什么不是所有flexbox元素都像flexbox divs？ [英] Why are not all flexbox elements behaving like flexbox divs?

问题描述

为什么flexbox不能正常使用 fieldset 或其他非 - div 标签？
我希望他们在 div 例如， flex-direction：row; 是flexbox中的默认值。但 fieldset 是强制应用宽度，我不明白为什么。

Why is flexbox not working properly with fieldset or other non-div tags? I expect them to line up next to each other like in the div example, as flex-direction: row; is default in flexbox. However fieldset is force applying a width to them, and I do not understand why.

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 ;

CSS: All elements are set to display: flex;

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

推荐答案

据我所知，这是由浏览器错误 fieldset 元素。

As far as I can tell, this is down to browser bugs to do with the fieldset element.

这是 Chrome中的 fieldset 元素的已知问题。 Firefox在中有类似（非常旧）的问题， legend 和 fieldset 是替换元素。

It's a known issue with fieldset elements in Chrome. Firefox has a similar (very old) issue in that legend and fieldset are replaced elements.

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

I guess it's safer to use a <div role="group"> instead of a real fieldset for now. In your CSS you could use div[role='group'] as your selector. See http://www.deque.com/aria-group-viable-alternative-fieldset-legend for more information.

这篇关于为什么不是所有flexbox元素都像flexbox divs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！