我尝试使用fieldset和display: flex设置display: inline-flex元素的样式。
但是，它不起作用：flex表现得像block，inline-flex表现得像inline-block。
在Firefox和Chrome上都会发生这种情况，但奇怪的是它适用于IE。
这是一个错误吗？我发现fieldset在HTML5和CSS Flexible Box Layout规范中都不应该有任何特殊行为。
fieldset, div {
display: flex;
border: 1px solid;
}<fieldset>
<p>foo</p>
<p>bar</p>
</fieldset>
<div>
<p>foo</p>
<p>bar</p>
</div>
答案 0 :(得分：109)
根据Bug 984869 - display: flex doesn't work for button elements，
<button>在纯CSS中无法实现（通过浏览器），因此它们是一个 从CSS的角度来看，这是一个黑盒子。这意味着他们 不一定以与例如一个<div>会。这并非特定于flexbox - 例如如果，我们不会渲染滚动条 你把
overflow:scroll放在一个按钮上，我们不会把它作为一个按钮 表格，如果你把display:table放在上面。进一步退缩，这不是
<button>特有的。考虑<fieldset>和也有特殊的渲染行为：<table>data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>在这些情况下，Chrome同意我们并忽略了
flex显示模式。 （事实证明＆＃34; abc＆＃34;和＃34; def＆＃34;结束了 垂直堆叠）。事实上，他们碰巧做了你自己的事 期待<button style="display:flex">可能只是因为 实施细节。在Gecko的按钮实现中，我们硬编码
<button>（和<fieldset>，和）具有特定的帧类（因此， 一种特定的方式来布置子元素），无论如何<table>display财产。如果你想让孩子们可靠地安排在一个孩子 跨浏览器时的特定布局模式，最好的选择是 在按钮内部使用wrapper-div，就像你需要在里面一样
aa<table>或<fieldset>。
因此，该错误被标记为＆＃34;已解决无效＆＃34;。
还有Bug 1047590 - display: flex; doesn't work in <fieldset>，目前＆＃34;未经证实＆＃34;。
好消息：Firefox 46+为<fieldset>实施Flexbox。请参阅bug 1230207。
答案 1 :(得分：14)
我发现这可能是Chrome和Firefox上的一个错误，其中legend和fieldset为replaced elements。
可能的解决方法是在HTML中使用<div role="group">，并在CSS div[role='group']中应用选择器。
答案 2 :(得分：7)
根据我的经验，我发现<fieldset>，<button>和<textarea>都无法正确使用display:flex或继承的属性。
正如其他人已经提到的那样，有报道称存在漏洞。如果您想使用flexbox来控制排序（例如order:2），那么您需要将元素包装在div中。如果你想让flexbox控制实际的布局和尺寸，那么你可能想要考虑使用div而不是输入控件（我知道这很糟糕）。
答案 3 :(得分：3)
<div role="group">
<p>foo</p>
<p>bar</p>
</div>
<div>
<p>foo</p>
<p>bar</p>
</div>
可能需要使用角色组，因为firefox，chrome和我认为safari有明显的字段集错误。那么CSS中的选择器就是
div[role='group'], div {
display: flex;
border: 1px solid;
}
修改：以下是其他人遇到的一些问题。
答案 4 :(得分：3)
这是Chrome中的错误。请在此问题上加一个星号，以提高优先级： https://bugs.chromium.org/p/chromium/issues/detail?id=375693
同时，我创建了这三个Code Pen示例，以展示如何解决此问题。它们是使用CSS Grid构建的示例，但是可以将相同的技术用于flexbox。
这是处理问题的更合适的方法。缺点是您必须处理生成应用于每个假图例元素的唯一ID。
https://codepen.io/daniel-tonon/pen/vaaGzZ
<style>
.flex-container {
display: flex;
}
</style>
<fieldset aria-labelledby="fake-legend">
<div class="flex-container">
<div class="flex-child" id="fake-legend">
I am as good accessibilty wise as a real legend
</div>
...
</div>
</fieldset>
如果您需要flex-container能够拉伸到同级元素的高度，然后又将该拉伸传递给子元素，则需要使用role="group"而不是<fieldset> < / p>
https://codepen.io/daniel-tonon/pen/BayRjGz
<style>
.flex-container {
display: flex;
}
</style>
<div role="group" class="flex-container" aria-labelledby="fake-legend">
<div class="flex-child" id="fake-legend">
I am as good accessibilty wise as a real legend
</div>
...
</div>
这是一种更简单的方法。它仍然可以访问，但是用这种方法不必处理ID。主要缺点是，真实图例元素和假图例元素之间将存在重复的内容。
https://codepen.io/daniel-tonon/pen/zLLqjY
<style>
.visually-hidden {
position: absolute;
opacity: 0;
pointer-events: none;
}
.flex-container {
display: flex;
}
</style>
<fieldset>
<legend class="visually-hidden">
I am a real screen-reader accessible legend element
</legend>
<div class="flex-container">
<div class="flex-child" aria-hidden="true">
I am a fake legend purely for styling purposes
</div>
...
</div>
</fieldset>
当您第一次尝试自己修复此问题时，您可能会尝试这样做：
<!-- DO NOT DO THIS! -->
<fieldset>
<div class="flex-container">
<legend class="flex-child">
Broken semantics legend text
</legend>
...
</div>
</fieldset>
您会发现它起作用，然后您可能会继续前进而无需再三思。
问题在于，在字段集和图例之间放置div包装器会破坏两个元素之间的关系。这破坏了字段集/图例的语义。
因此，您一开始就克服了使用字段集/传奇的整个目的。
此外，如果您不给该字段集添加图例，那么使用该字段集也没有多大意义。
答案 5 :(得分：0)
要回答最初的问题：是的，这是一个错误，但是在提出问题时并没有明确定义。
现在可以更好地定义字段集的呈现方式：https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements
在Firefox和Safari中，flexbox上的fieldset现在可以使用。 Chromium中还没有。 （请参见https://bugs.chromium.org/p/chromium/issues/detail?id=375693）
另请参阅https://blog.whatwg.org/the-state-of-fieldset-interoperability，了解2018年规范的改进。
答案 6 :(得分：-1)
你可以在<fieldset>中使用以下道具添加额外的div：
flex-inner-wrapper {
display: inherit;
flex-flow: inherit;
justify-content: inherit;
align-items: inherit;
}