1. 首页
  2. 问题
  3. 为什么不能 是弹性容器吗？
一尘不染

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

html

我尝试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>

阅读 238

收藏
2020-05-10

共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+实现了Flexbox for<fieldset>。

2020-05-10