Flex/Grid布局不适用于按钮或字段集元素 [英] Flex / Grid layouts not working on button or fieldset elements

问题描述

我正在尝试将<button> -tag的内部元素与flexbox的justify-content: center居中对齐.但是Safari不会将它们居中.我可以将相同的样式应用于任何其他标签，并且可以按预期工作(请参见<p> -tag).只有按钮是左对齐的.

I'm trying to center inner elements of a <button>-tag with flexbox's justify-content: center. But Safari does not center them. I can apply the same style to any other tags and it works as intended (see the <p>-tag). Only the button is left-aligned.

尝试使用Firefox或Chrome浏览器，您会发现其中的区别.

Try Firefox or Chrome and you can see the difference.

我必须覆盖任何用户代理样式吗?或任何其他解决此问题的方法?

Is there any user agent style I have to overwrite? Or any other solution to this problem?

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

和一个jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

And a jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

推荐答案

问题

在某些浏览器中，除了在block和inline-block之间切换之外，<button>元素不接受对其display值的更改.这意味着<button>元素也不能是flex或grid容器，也不能是<table>.

The Problem

In some browsers the <button> element doesn't accept changes to its display value, beyond switching between block and inline-block. This means that a <button> element cannot be a flex or grid container, or a <table>, either.

除了<button>元素之外，您可能还会发现此约束也适用于<fieldset>和<legend>元素.

In addition to <button> elements, you may find this constraint applying to <fieldset> and <legend> elements, as well.

有关更多详细信息，请参见下面的错误报告.

See the bug reports below for more details.

注意:尽管<button>元素不能为flex容器，但它们可以为flex项.

Note: Although they cannot be flex containers, <button> elements can be flex items.

有一个简单易用的跨浏览器解决方案来解决此问题:

There is a simple and easy cross-browser workaround to this problem:

将button的内容包装在span中，然后将span设置为flex容器.

Wrap the content of the button in a span, and make the span the flex container.

调整后的HTML(将button内容包装在span中)

Adjusted HTML (wrapped button content in a span)

<div>
    <button>
        <span><!-- using a div also works but is not valid HTML -->
            <span>Test</span>
            <span>Test</span>
        </span>
    </button>
    <p>
        <span>Test</span>
        <span>Test</span>
    </p>
</div>

调整后的CSS(定位为span)

Adjusted CSS (targeted span)

button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

修订版演示

<button>上的Flexbox会阻止内容，但不会建立Flex格式上下文

Flexbox on a <button> blockifies the contents but doesn't establish a flex formatting context

用户(Oriol Brufau): <button>的子代被阻塞，因为它指定了flexbox规范.但是，<button>似乎建立了块格式化上下文，而不是flex上下文.

User (Oriol Brufau): The children of the <button> are blockified, as dictates the flexbox spec. However, the <button> seems to establish a block formatting context instead of a flex one.

用户(Daniel Holbert):这实际上是HTML规范所要求的.几个HTML容器元素是特殊的"，并且在Gecko中有效地忽略了它们的CSS display值(除了是内联级别还是块级别). <button>是其中之一. <fieldset>& <legend>也是.

User (Daniel Holbert): That is effectively what the HTML spec requires. Several HTML container-elements are "special" and effectively ignore their CSS display value in Gecko [aside from whether it's inline-level vs. block-level]. <button> is one of these. <fieldset> & <legend> are as well.

在<button>元素内添加对display:flex/grid和columnset布局的支持

Add support for display:flex/grid and columnset layout inside <button> elements

用户(丹尼尔·霍尔伯特):

User (Daniel Holbert):

<button>在纯CSS中无法实现(由浏览器实现)，因此从CSS的角度来看，它们有点黑盒子.这意味着 他们不一定会以与<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.

这不是特定于flexbox的-例如如果将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.

和老式的HTML元素(如<button>和<table>和<fieldset>)仅不支持自定义display值，除了 为了回答非常高级的问题，这是 元素块级或内联级"，用于使其他内容流动 元素.

And old-timey HTML elements like <button> and <table> and <fieldset> simply do not support custom display values, other than for the purposes of answering the very high-level question of "is this element block-level or inline-level", for flowing other content around the element.

另请参阅:

• Flexbug#9:某些HTML元素不能是Flex容器
• 10.某些HTML元素不能是网格容器

• Flexbug #9: Some HTML elements can't be flex containers
• 10. Some HTML elements can't be grid containers

这篇关于Flex/Grid布局不适用于按钮或字段集元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！