在某些浏览器中，除了在和之间切换外，该
<button>元素不接受对其
display值的更改。这意味着元素也不能是flex或grid容器，也不能是a。
block``inline-block``<button>``<table>
除了
<button>元素之外，您可能还会发现此约束也适用于
<fieldset>和
<legend>元素。
有关更多详细信息，请参见下面的错误报告。
注意：虽然它们不能是flex容器，但是<button>
元素可以是flex项。
解决方案
有一个简单易用的跨浏览器解决方法来解决此问题：
包裹的内容button
中span
，使span
柔性容器。
调整后的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;}参考/错误报告
Flexbox会
<button>阻止内容，但不会建立Flex格式化上下文
用户（Oriol Brufau）：
的子级已<button>
被屏蔽，因为它指定了flexbox规范。但是，<button>
似乎建立了一个块格式化上下文而不是一个flex上下文。
用户（Daniel Holbert）： 实际上，这是HTML规范所要求的。
几个HTML容器元素是“特殊的”，并且display
在Gecko中有效地忽略了它们的CSS
值（除了是内联级别还是块级别）。<button>
是其中之一。<fieldset>
＆<legend>
也是如此。
用户（Daniel Holbert）：
<button>
不能在纯CSS中实现（由浏览器实现），因此从CSS的角度来看，它们有点黑盒子。这意味着它们不一定以与例如a <div>
。相同的方式做出反应。
这不是特定于flexbox的-例如，如果您放置overflow:scroll
按钮，则不会渲染滚动条，如果您放置按钮，则不会渲染为表格display:table
。向后退一步，这并非特定于<button>
。考虑<fieldset>
和<table>
具有特殊的渲染行为。
而带点儿怀旧HTML元素，如<button>
与<table>
和<fieldset>
根本不支持自定义display
值，比回答的非常高级的问题的目的，其他的“是该元素的块级或行内”，该元素周围流动等内容。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）