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

Question

由于某种原因，像这样使用显示 Flex 会导致项目在 Mozilla 中彼此重叠。是否有一个原因？在 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. 除了让您选择按钮是块级按钮还是内联级别。 （在 Chrome 和 Firefox 中，<table> 和 <fieldset> 也是如此。）

2. 您看到的效果（包装）是由于 flexbox 的一个怪癖而发生的——display:flex 的东西会强制它们的子级为块级。因此，您的<svg> 和<span> 元素变为display:block 而不是它们默认的display:inline，因此它们各自都有自己的行（因为它们现在都是一个块）。这会发生即使按钮实际上没有变成一个弹性容器，因为样式系统看到的只是样式数据——所以它看到“display:flex” parent & 阻止孩子。它不知道我们碰巧在 <button> 上，它是特殊的，实际上不是弹性容器。这可能是 Firefox 中的一个错误。我不确定，顺便说一句。

无论如何 - 如果您尝试在 <button> 上设置 dipslay:flex，那么您实际需要的是在您的 <button> 中包含一个 wrapper-div，以包含 <svg> 和<span>，您可以将其设置为弹性容器。

这是您的代码 sn-p 的更新版本（删除了 -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>

Answer 2

我会为按钮使用更轻量级的方法display:inline-block：

button {
  height: 40px;
  padding: 0 10px;
  white-space: nowrap;}
  button * {
    display: inline-block;
    vertical-align: middle;}
  button svg {
    height: 15px;
    margin-right: 5px;}

<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>