为什么不能是弹性容器吗？

小编典典

为什么不能是弹性容器吗？

all

我尝试使用and来设置fieldset元素的样式。display: flex``display: inline-flex

但是，它不起作用：flex表现得像block，并且inline-flex表现得像inline-block。

这在 Firefox 和 Chrome 上都会发生，但奇怪的是它适用于 IE。

它是一个错误吗？我找不到fieldset应该有任何特殊行为，无论是在HTML5还是在CSS 灵活框布局规范中。

fieldset, div {

    display: flex;

    border: 1px solid;

}


<fieldset>

    <p>foo</p>

    <p>bar</p>

</fieldset>

<div>

    <p>foo</p>

    <p>bar</p>

</div>

阅读 79

2022-06-08

共1个答案

小编典典

根据错误 984869 -display: flex不适用于按钮元素，

<button>在纯 CSS 中是不可实现的（通过浏览器），所以从 CSS 的角度来看，它们有点像黑盒子。这意味着它们不一定会以与例如 a
相同的方式做出反应<div>。

这不是特定于 flexbox
的——例如，如果您按下按钮，我们不会呈现滚动条，如果您overflow:scroll按下按钮，我们也不会将其呈现为表格display:table。

退一步说，这并不是特定于<button>. 考虑 <fieldset> ~~和<table>~~它也有特殊的渲染行为：
data:text/html,<fieldset
style=”display:flex”>
abc
def

在这些情况下，Chrome 同意我们的意见并无视flex
显示模式。（正如“abc”和“def”最终垂直堆叠的事实所揭示的那样）。他们碰巧做到了您所期望的这一事实<button style="display:flex">可能只是由于实现细节。

在 Gecko 的按钮实现中，我们硬编码<button>（和 <fieldset>， ~~和<table>~~)
具有特定的框架类（因此，具有布局子元素的特定方式），而与 display属性无关。

如果您想以跨浏览器的方式可靠地让子项以特定的布局模式可靠地排列，最好的办法是在按钮内部使用 wrapper-div，就像您需要在
~~一个<table>或~~一个<fieldset>。

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

还有错误 1047590 -display: flex;不起作用<fieldset>，目前“未确认”。

好消息 ：Firefox 46+ 为<fieldset>. 请参阅错误
1230207。

2022-06-08