为什么<fieldset>不能是伸缩容器?

我尝试用display: flex和display: inline-flex样式fieldset元素。

然而，它并没有起作用:flex表现得像块，而内联flex表现得像内联块。

火狐和Chrome浏览器都是这样，但奇怪的是IE浏览器却可以。

是bug吗?我找不到fieldset应该有任何特殊的行为，无论是在HTML5还是在CSS Flexible Box Layout规范。

字段集，div { 显示:flex; 边框:1px实体; ｝ <自定义字段> foo < p > < / p > 酒吧< p > < / p > < /自定义字段> < div > foo < p > < / p > 酒吧< p > < / p > < / div >

当前回答

回答最初的问题:是的，这是一个bug，但在提出问题时并没有明确定义。

现在fieldset的呈现有了更好的定义:https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements

在Firefox和Safari中，flexbox on fieldset现在工作。在铬中还没有。(见https://bugs.chromium.org/p/chromium/issues/detail?id=375693)

参见https://blog.whatwg.org/the-state-of-fieldset-interoperability了解2018年规范的改进。

2019-12-20 11:51:17

其他回答

你可以用下面的道具在<fieldset>中添加额外的div:

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}

2017-09-06 22:46:58

<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

可能需要使用角色组，因为firefox, chrome和我认为safari有一个bug与字段集明显。那么CSS中的选择器就是

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

编辑:这里有一些其他人也在经历的问题。

发行375693

发行262679

2015-01-21 23:24:46

根据我的经验，我发现无论是<fieldset>，或<button>，或<textarea>都不能正确使用display:flex或继承属性。

正如其他人已经提到的，已经报告了错误。如果你想要使用flexbox来控制排序(例如order:2)，那么你需要将元素包装在div中。如果你想要flexbox来控制实际的布局和尺寸，那么你可能会考虑使用div，而不是输入控件(这很糟糕，我知道)。

2015-01-22 16:08:23

我发现这可能是一个错误在Chrome和Firefox的传说和字段集替换元素。

错误报告:

Bug Chrome(自v86以来修复) Firefox Bug(自v46以来修复)

一个可行的解决方案:

一个可能的解决办法是在HTML中使用<div role="group">，并在CSS中应用div[role='group']作为选择器。

更新

在Chrome 83版按钮可以工作显示:inline-grid/grid/inline-flex/flex，你可以看到下面的演示:

按钮{ 显示:inline-flex; 高度:2快速眼动; 对齐项目:flex-end; 宽度:4快速眼动; -webkit-appearance:没有; justify-content: flex-end; ｝ <！-- align-items关键字应该在Chrome 81或更早版本中失败，但在Chrome 83或更高版本中工作。要查看错误，按钮需要使其更像外部容器的样式。换句话说，它需要一个高度或宽度集。 --> <按钮>你好> < /按钮 <input type="button" value="Hi">

2015-01-21 23:32:47