Html 为什么可以'；t<；字段集>；是弹性容器吗？

我试图用

display:flex

和

display:inline flex

为

fieldset

元素设计样式

但是，它不起作用：

flex

表现得像

block

，而

inline flex

表现得像

inline block

这在Firefox和Chrome上都会发生，但奇怪的是，它在IE上也能工作

是虫子吗？我找不到

fieldset

应该有任何特殊行为，无论是在规范中还是在规范中

字段集，div{
显示器：flex；
边框：1px实心；
}

福

酒吧

福

酒吧

编辑：以下是其他人也遇到的一些问题

---

我发现这可能是Chrome和Firefox上的一个bug，其中

legend

和

fieldset

是

报告的错误： （仍然开放）
（自v46起修复）

可能的解决方法： 一种可能的解决方法是在HTML中使用

，并在CSS

div[role='group']

中应用选择器

---

更新 在

按钮

中，可以使用

显示：inline grid/grid/inline flex/flex

，您可以看到下面的演示：

按钮{
显示：内联flex；
高度：2em；
对齐项目：柔性端；
宽度：4rem；
-webkit外观：无；
证明内容：柔性端；
}

你好

根据

不能（通过浏览器）在纯CSS中实现，因此它们是 从CSS的角度来看，有点黑盒。这意味着他们 不一定要像

那样做出反应

这并不特定于flexbox——例如，如果 您将

overflow:scroll

放在按钮上，我们不会将其渲染为 表格，如果您将

显示：表格

退一步说，这并不是特定于
的。考虑
和
也具有特殊的渲染行为：

数据：text/html，abcdef

在这些情况下，Chrome同意我们的意见，并忽略了
flex
显示模式。（正如“abc”和“def”结束的事实所揭示的那样
垂直堆放）。他们碰巧做了你想做的事
预期的
可能是由于
实施细节

在Gecko的按钮实现中，我们硬编码
（和
和
）具有特定的帧类（因此，
布局子元素的特定方式），而不考虑
显示
属性

如果您希望可靠地将孩子安排在
在跨浏览器方式的特定布局模式中，您的最佳选择是
在按钮内部使用包装器div，就像在按钮内部使用包装器div一样
属于
或

因此，该错误被标记为“已解决无效”

还有，目前“未确认”


好消息：Firefox46+为
实现Flexbox。请参阅。
根据我的经验，我发现无论是
，还是
，还是
都不能正确使用
显示：flex
或继承属性

正如其他人已经提到的，已经报告了bug。如果你想使用FrasBox来控制排序（例如<代码>订单：2 < /代码>），那么你需要将元素包在一个div中。如果你想让FrasBox控制实际的布局和尺寸，那么你可能想考虑使用DIV，而不是输入控件（我知道它是臭的）。p> 您可以使用以下道具在
中添加div：

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

回答最初的问题：是的，这是一个bug，但在提出问题时它没有得到很好的定义

现在，更好地定义了字段集的渲染：

在Firefox和Safari中，
fieldset
上的
flexbox
现在可以工作了。它还没有铬。（见附件）

另请参阅2018年规范中所做的改进。
请将Chrome bug标记为星形，以提高bug优先级
这是Chrome中的一个bug。请在此问题上添加星号，以提高其修复优先级：

同时，我创建了这三个代码笔示例来展示如何解决这个问题。它们是使用CSS网格构建的，但同样的技术也可以用于flexbox

使用aria labelledby代替legend
这是处理这个问题的更恰当的方法。缺点是，您必须处理生成应用于每个伪图例元素的唯一ID的问题



.柔性容器{
显示器：flex；
}
我和一个真正的传奇人物一样通俗易懂
...

使用role=“group”和aria labelledby代替fieldset和legend
如果您需要flex容器能够拉伸到同级元素的高度，然后将该拉伸传递给其子元素，则需要使用
role=“group”
而不是



.柔性容器{
显示器：flex；
}
我和一个真正的传奇人物一样通俗易懂
...

创建用于样式设置的假重复图例
这是一种更老套的方法。它仍然是可访问的，但这样做时，您不必处理ID。主要的缺点是，在真实的图例元素和伪图例元素之间会有重复的内容



.仅限屏幕阅读器{
位置：绝对位置；
不透明度：0；
指针事件：无；
}
.柔性容器{
显示器：flex；
}
我是一个真正的屏幕阅读器
我是一个纯粹出于造型目的的假传奇
...

图例必须是直接的
当你第一次尝试自己解决这个问题时
div[role='group'], div {
    display: flex;
    border: 1px solid;
}

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