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

Question

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

JSFiddle

谁错了？是 FF 还是 Chrome(和我)。我应该怎么做才能在任一浏览器中获得相同的结果(文本前的图标、垂直居中、无换行)？

Answer 1

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

具体来说，根据spec， flex 元素被 block 化了。 :

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

因此，i 和 span 将成为 inline，成为 block。

但是，flex 属性似乎既不适用于 flex 容器 button，也不适用于 flex 元素 i 和 span。

所以 flex 元素根据 block 格式化上下文而不是 flex 上下文显示，并且由于它们是 block，它们出现在不同的行。

修复它的一种方法是将内容包装在容器中，并使其成为 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>