在按钮上使用display flex使其包装在Firefox中

Question

出于某种原因,使用这样的显示Flex会导致项目在Mozilla中包装一个ontop.是否有一个原因？在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主干版本已更改,以匹配提问者对此问题的期望.这个改变暂定于Firefox 52,我认为它将于2017年3月出货.]

所以,有一些事情:

1. 该display属性对Firefox中的a 几乎没有影响<button>,如https://bugzilla.mozilla.org/show_bug.cgi?id=984869中所述,除了让您选择按钮是块级还是内联级.(这也是真实的<table>,并<fieldset>在Chrome和Firefox浏览器.)

2. 你看到(包装)的效果正在发生,因为一个弹性盒的怪癖 - display:flex强迫他们的孩子成为块级别的东西.所以,你<svg>和<span>要素成为display:block代替它们的默认display:inline,所以他们各自得到自己的行(因为他们现在每一个块).发生这种情况即使按钮不会真正成为一个柔性的容器,因为所有的风格系统看到的是风格的数据-因此它看到" display:flex"父&blockifies孩子.它不知道我们碰巧是在一个<button>特殊的而不是实际上是一个灵活的容器.这可能是Firefox中的一个错误; 我不确定,随便.

无论如何 - 如果你试图设置dipslay:flexa <button>,你真正需要的是你内部的包装器div <button>,包含<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>

Answer 2

I would use more light weight method for buttons 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>