问题
在一些浏览器中，<button>元素无法接受超出在block和inline-block之间切换以外的display值更改。这意味着<button>元素既不能是flex或grid容器，也不能是<table>。
除了<button>元素，您可能还会发现这个限制适用于<fieldset>和<legend>元素。
有关详细信息，请参见下面的错误报告。
注意：虽然它们不能是flex容器，但<button>元素可以是flex项。
解决方案
有一个简单易行的跨浏览器解决此问题的方法：
将button内容包装在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;
}
修正后的演示
参考文献/错误报告
在<button>元素上使用Flexbox会将内容块化，但无法建立Flex格式上下文
用户（Oriol Brufau）：<button>的子项被块化，符合Flexbox规范。然而，<button>似乎建立了一个块格式上下文而不是Flex格式。
用户（Daniel Holbert）：这实际上就是HTML规范所要求的。几个HTML容器元素是“特殊的”，除了其是否为行级或块级元素之外，在Gecko中它们实际上忽略其CSS display值。其中之一是<button>，<fieldset>和<legend>.
添加支持在<button>元素内使用display:flex/grid和columnset布局
用户（Daniel Holbert）：
<button>不能通过纯CSS实现（由浏览器），因此它们从CSS的角度来看有点像黑盒子。这意味着它们不一定会像<div>一样作出相同的反应。
这并非特定于flexbox——例如，如果在按钮上放置overflow:scroll，我们不会渲染滚动条，如果将其放置为display:table，我们也不会将其渲染为表格。
进一步地，这并非特定于<button>。考虑具有特殊渲染行为的<fieldset>和<table>等元素。
而旧式的HTML元素如<button>、<table>和<fieldset>除了用于回答“这个元素是块级还是行内级”，以便流动其他内容周围该元素之外，根本不支持自定义display值。
另请参阅：
