CSS flexbox在FireFox中包装内容(不是Chrome)

Question

我有一个button由一个<i>和一个<span>元素(一个图标和一些文本)组成.现在两者都有不同的尺寸,所以我在我的按钮上应用了一个flexbox,它可以很好地集中我的物品.在Chrome中,一切都按预期工作,但在当前FF中使用页面会导致包含按钮的内部内容.图标通过:before伪元素显示.

的jsfiddle

谁在这里错了？是FF还是Chrome(和我).我应该怎样做才能在浏览器中获得相同的结果(文本前的图标,垂直中心,没有换行)？

Answer 1

奇怪的.button元素有一些特殊的行为,似乎与flexbox冲突.

具体来说,什么情况是,柔性项目blockified,根据规范:

Flex项的display值被阻塞:如果生成Flex容器的元素的in-flow子节点的指定是内联级别值,则计算其块级别等效值.display

因此,i和span将inline成为blocks.

然而,似乎弯曲特性并不既不适用于柔性容器button也不柔性物品i和span.

因此,根据块格式化上下文而不是flex格式显示弹性项目,因为它们是blocks,它们出现在不同的行上.

修复它的一种方法是将内容包装在容器中,并将其设置为flex容器,而不是按钮本身.

div {
  display: flex;
  align-items: center;
}
i {
  width: 12px;
  text-align: center;
  font-size: 22px;
}
i:before {
  content: "\2193";
}
span {
  font-size: 16px;
  margin-right: 10px;
}

<button>
  <div>
    <i></i>
    <span>Text</span>
  </div>
</button>

还要考虑简化标记.

span {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-right: 10px;
}
span:before {
  content: "\2193";
  width: 12px;
  text-align: center;
  font-size: 22px;
}

<button>
  <span>Text</span>
</button>