为什么 `display: flex` 不适用于 `` 元素？

为什么 Fieldset 元素不像 Flex 容器

使用 display: flex 或 display: inline-flex 设置 fieldset 元素的样式可能会让您摸不着头脑，因为它的行为与预期不同。它不是充当灵活的容器，而是分别与块或内联块元素类似。

错误或预期行为？

Firefox 和 Chrome 中的此行为（虽然令人惊讶地在 IE 中工作）不是一个错误。根据 Bug 984869，按钮元素是通过特殊处理呈现的，并且可能会忽略诸如显示之类的 CSS 属性。这种行为并不是按钮所独有的。 fieldset、table 和 del 元素也表现出类似的渲染异常。

解决方案

按照 CSS 灵活框布局中的指定可靠地布局 fieldset 元素的子元素，您需要使用一种解决方法：将子元素包装在字段集中的 div 容器内。这种方法在所有浏览器中都能一致地工作，确保在所有情况下都能获得所需的布局。

Firefox 46 及更高版本

但是，对于 Firefox 用户来说有个好消息：Firefox 46 及更高版本实现支持 Fieldset 元素的 Flexbox（请参阅错误 1230207）。这意味着您可以在字段集上使用 display: flex 而无需解决方法。

以上是为什么 `display: flex` 不适用于 `` 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！