为什么不能< fieldset>是flex容器？ [英] Why can't <fieldset> be flex containers?

问题描述

我试图用 display：flex 和风格的字段集 -flex 。

I tried to style a fieldset element with display: flex and display: inline-flex.

但是，它没有工作： flex code> block ， inline-flex 表现为 inline-block 。

However, it didn't work: flex behaved like block, and inline-flex behaved like inline-block.

这在Firefox和Chrome上都会发生，但奇怪的是它在IE上可以正常工作。

This happens both on Firefox and Chrome, but strangely it works on IE.

这是错误吗？我找不到 fieldset 应该有任何特殊的行为，在 HTML5 ，也不在 CSS弹性框布局规范中。

Is it a bug? I couldn't find that fieldset should have any special behavior, neither in HTML5 nor in CSS Flexible Box Layout specs.

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

推荐答案

根据 Bug 984869 - display：flex 不适用于按钮元素，

According to Bug 984869 - display: flex doesn't work for button elements,

< button& 在纯CSS中无法实现（通过浏览器），因此从CSS的角度来看，它们是一个黑框的
位。这意味着他们
不一定以相同的方式做出反应，例如。 a < div> 会。

<button> is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that they don't necessarily react in the same way that e.g. a <div> would.

如果
在一个按钮上放置 overflow：scroll ，我们不会渲染滚动条，如果你放在一个按钮上，我们不会将它渲染为
表 display：table 。

This isn't specific to flexbox -- e.g. we don't render scrollbars if you put overflow:scroll on a button, and we don't render it as a table if you put display:table on it.

再进一步，这不是特定于< button> 。考虑
< fieldset> 和< table> 特殊呈现行为：

Stepping back even further, this isn't specific to <button>. Consider <fieldset> and <table> which also have special rendering behavior:

data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>

在这些情况下，Chrome同意我们，忽略 flex
显示模式。 （由abc和def结束，垂直堆叠
的事实表明）。事实上，他们恰好做了你
期望在< button style =display：flex> $ b实现细节。

In these cases, Chrome agrees with us and disregards the flex display mode. (as revealed by the fact that "abc" and "def" end up being stacked vertically). The fact that they happen to do what you're expecting on <button style="display:flex"> is likely just due to an implementation detail.

在Gecko的按钮实现中，我们硬编码< button> < fieldset> ，和< table> （因此，
a特定的布局子元素的方式），而不管
显示属性。

In Gecko's button implementation, we hardcode <button> (and <fieldset>, and <table>) as having a specific frame class (and hence, a specific way of laying out the child elements), regardless of the display property.

如果你想可靠地让孩子以跨浏览器方式在
特定的布局模式下可靠地排列，你最好的打赌是
在按钮内使用wrapper-div，正如你需要在
的 a < table> 或 a < fieldset> / code>。

If you want to reliably have the children reliably arranged in a particular layout mode in a cross-browser fashion, your best bet is to use a wrapper-div inside the button, just as you would need to inside of a <table> or a <fieldset>.

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

Therefore, that bug was marked as "resolved invalid".

还有错误1047590 - display：flex; 在< fieldset> 中无效，目前为未确认。

There is also Bug 1047590 - display: flex; doesn't work in <fieldset>, currently "unconfirmed".

好消息：Firefox 46+为< fieldset> 实现了Flexbox。请参见错误1230207 。

Good news: Firefox 46+ implements Flexbox for <fieldset>. See bug 1230207.

这篇关于为什么不能< fieldset>是flex容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！