为什么不能 <fieldset>是弹性容器吗? [英] Why can't <fieldset> be flex containers?
问题描述
我尝试使用 display: flex 和 display: inline-flex 设置 fieldset 元素的样式.
然而，它不起作用:flex 表现得像 block，而 inline-flex 表现得像 inline-block.
这在 Firefox 和 Chrome 上都会发生，但奇怪的是它在 IE 上工作.
这是一个错误吗?我找不到 fieldset 应该有任何特殊行为，无论是在 HTML5 也不在 CSS 弹性框布局规范中.
fieldset, div {显示:弹性；边框:1px 实心；}根据 Bug 984869 - display: flex 不适用于按钮元素,
不能在纯 CSS 中实现(浏览器)，所以它们是从 CSS 的角度来看，有点像黑盒子.这意味着他们不一定以相同的方式做出反应，例如
这不是 flexbox 特有的——例如我们不渲染滚动条，如果您将 overflow:scroll 放在按钮上，我们不会将其呈现为table 如果你把 display:table 放在上面.
退一步说，这不是 在这些情况下，Chrome 同意我们的意见并无视 在 Gecko 的按钮实现中，我们对 如果你想可靠地将孩子们可靠地安排在一个跨浏览器的特定布局模式，最好的办法是在按钮内使用包装器 div，就像你需要在里面一样 因此，该错误被标记为已解决无效". 还有 Bug 1047590 - 好消息:Firefox 46+ 为 I tried to style a However, it didn't work: This happens both on Firefox and Chrome, but strangely it works on IE. Is it a bug? I couldn't find that
According to Bug 984869 - This isn't specific to flexbox -- e.g. we don't render scrollbars if
you put Stepping back even further, this isn't specific to In these cases, Chrome agrees with us and disregards the In Gecko's button implementation, we hardcode 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 Therefore, that bug was marked as "resolved invalid". There is also Bug 1047590 - Good news: Firefox 46+ implements Flexbox for 这篇关于为什么不能 <fieldset>是弹性容器吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 特有的.考虑 和 也有特殊的渲染行为:
data:text/html,flex显示模式.(正如abc"和def"结束的事实所揭示的那样垂直堆叠).他们碰巧做你想做的事期望 <button style="display:flex"> 可能只是由于实施细节.(和、 和 ) 具有特定的帧类(因此，一种布置子元素的特定方式)，无论
display 属性.一个 或一个
.display: flex; 在 ，目前未确认". 实现了 Flexbox.请参阅错误 1230207.fieldset element with display: flex and display: inline-flex.flex behaved like block, and inline-flex behaved like inline-block.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>display: flex doesn't work for button elements,
<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 on a button, and we don't render it as a
table if you put display:table on it.<button>. Consider
<fieldset> and which also have special rendering behavior:<table>data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>
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.<button> (and
<fieldset>, and ) as having a specific frame class (and hence,
a specific way of laying out the child elements), regardless of the
<table>display property.a a <table> or<fieldset>.display: flex; doesn't work in <fieldset>, currently "unconfirmed".
<fieldset>. See bug 1230207.
登录
关闭
