html - Flexbox无法在按钮或字段集元素上使用

我正试图用flexbox的<button>将justify-content: center-标签的内部元素居中。但野生动物园并没有把它们放在中心。我可以将相同的样式应用于任何其他标记，并且它可以按预期工作（请参见<p>-tag）。只有按钮是左对齐的。
试试Firefox或Chrome，你会发现两者的区别。
是否需要覆盖任何用户代理样式？或者有其他办法解决这个问题吗？

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/

最佳答案

问题
在某些浏览器中，除了在<button>和display之间切换之外，block元素不接受对其inline-block值的更改。这意味着<button>元素不能是flex或grid容器，也不能是<table>。
除了<button>元素之外，您还可以发现这个约束也适用于<fieldset>和<legend>元素。
有关详细信息，请参阅下面的错误报告。
注意：尽管它们不能是flex容器，<button>元素可以是flex项。
解决方案
有一个简单易行的跨浏览器解决此问题的方法：
将button的内容物包装在span中，并使span成为flex容器。
调整后的HTML（将button内容包装在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）

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

Revised Demo
参考/错误报告
Flexbox on a <button> blockifies the contents but doesn't establish a flex formatting context
用户（Oriol Brufau）：<button>的子级被阻塞，这取决于flexbox规范。然而，<button>似乎建立了一个块格式上下文，而不是flex上下文。
用户（Daniel Holbert）：这正是HTML规范所要求的。一些HTML容器元素是“特殊的”，实际上忽略了Gecko中的CSSdisplay值[除了它是内联级别还是块级别]。<button>就是其中之一。<fieldset>和<legend>也是。
Add support for display:flex/grid and columnset layout inside <button> elements
用户（丹尼尔·霍尔伯特）：
<button>不能在纯CSS中实现（通过浏览器），因此从CSS的角度来看，它们有点黑盒。这意味着
它们的反应不一定与a<div>
会的。
这并不是flexbox特有的——例如，如果您将overflow:scroll放在按钮上，我们不会呈现滚动条，也不会呈现为
如果你把display:table放在桌子上。
再往后退一步，这并不特定于<button>。考虑<fieldset>和<table>它们也有特殊的渲染
行为。
而像<button>和<table>以及<fieldset>这样的旧式HTML元素不支持自定义的display值，除了
为了回答“这是不是
“元素块级别或内联级别”，用于流动其他内容
元素。
另见：
Flexbug #9: Some HTML elements can't be flex containers
10. Some HTML elements can't be grid containers

关于html - Flexbox无法在按钮或字段集元素上使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42812488/