html - 在按钮上使用 display flex 使其在 Firefox 中换行

Question

出于某种原因，像这样使用 display Flex 会导致元素在 Mozilla 中彼此重叠。是否有一个原因？在 Chrome 中，它工作正常，它们在中间的一行上。

火狐

Chrome

button.primary {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

svg {
  width: 15px
}

<button class="primary add-student">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
  <path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V88.6h33.9c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V65.2C130.4 63 129.6 61.2 128.1 59.6z"></path>
</svg><span>Add Student</span>
      </button>

Answer 1

[更新:Firefox 主干构建 have changed to match the questioner's expectations在这个问题上。此更改将暂时出现在 Firefox 52 中，我相信它会在 2017 年 3 月发布。]

所以，有几件事:

1. display属性几乎对<button>没有影响在 Firefox 中，如 https://bugzilla.mozilla.org/show_bug.cgi?id=984869 中所述, 除了让您选择按钮是 block 级还是内联级。 (Chrome 和 Firefox 中的 <table> 和 <fieldset> 也是如此。)

2. 您看到的效果(环绕)是由于 flexbox 的一个怪癖而发生的 -- 关于 display:flex 的事情强制他们的 child 成为 block 级。所以，你的 <svg>和 <span>元素变成display:block而不是默认的 display:inline ，所以他们每个人都有自己的行(因为他们现在都是一个街区)。这发生了即使按钮没有实际上成为一个 flex 容器，因为所有样式系统看到的都是样式数据——所以它看到“display:flex” parent & blockifies child 。它不知道我们碰巧在 <button> 上这是特殊的，实际上不是 flex 容器。这可能是 Firefox 中的一个错误；我不确定，随便。

无论如何 - 如果您尝试设置 dipslay:flex在 <button> 上，你真正需要的是你的<button>里面的包装器-div , 包含 <svg>和 <span> ，您可以将其设置为 flex 容器。

这是您的代码片段的更新版本(删除了带有 -moz 前缀的版本，因为正如另一个答案指出的那样，-moz-flex 在任何受支持的 Firefox 版本中都无法识别):

div.buttonContents {
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
button.primary {
  padding: 10px 20px;
}

svg {
  width: 15px
}

<button class="primary add-student">
  <div class="buttonContents">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
  <path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V88.6h33.9c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V65.2C130.4 63 129.6 61.2 128.1 59.6z"></path>
    </svg><span>Add Student</span>
  </div>
</button>