Question

我正在尝试将flex应用于某个按钮但是在Firefox上我遇到了Chrome上没有问题的问题。

这是我的CSS：

.button {
  display: inline-flex;
  align-items: center;
}

正如您在小提琴中看到的那样，“插入符号”字词被移动到一个新行，但只有当该元素是<button>标记时才会发生，<div>按预期工作。

http://codepen.io/anon/pen/XbLMGx

这是一个Firefox错误还是我缺少一些额外的CSS？

Answer 1

没关系，看起来像“火狐先生”不喜欢这个想法......

<button>在纯CSS中无法实现（通过浏览器），因此它们是一个   从CSS的角度来看，这是一个黑盒子。这意味着他们   不一定以与例如一个<div>会。

这不是特定于flexbox的 - 例如我们不渲染滚动条如果   你把“溢出：滚动”放在一个按钮上，我们不会将其渲染为   表格，如果你把“display：table”放在上面。

进一步退回，这不是<button>特有的。考虑   <fieldset>和<table>也有特殊的渲染行为：
  data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>
  data:text/html,<table style="display:flex"><div>abc</div><div>def</div>

在这些情况下，Chrome同意我们并忽视“flex”   显示模式。（正如“abc”和“def”结束的事实所揭示的那样   垂直堆叠）。事实上他们碰巧做了你自己的事   期待可能只是因为   实施细节。

在Gecko的按钮实现中，我们硬编码<button>（和   <fieldset>和<table>）具有特定的框架类（因此，   一种特定的方式来布置子元素），无论如何   “显示”属性。

如果你想让孩子们可靠地安排在一个孩子   跨浏览器时的特定布局模式，最好的选择是   在按钮内部使用wrapper-div，就像你需要在里面一样   <table>或<fieldset>。

https://bugzilla.mozilla.org/show_bug.cgi?id=984869

Firefox flex bug应用于按钮？

1 个答案: