CSS flexbox 在 FireFox 中包装内容（不是 Chrome）

Question

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

JSFiddle

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

Answer 1

您需要指定 display: -moz-box; 才能在 FF 上运行。检查更新后的 Fiddle.

Answer 2

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

具体来说，根据 spec:

，弹性项目被块化了

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。

但是，弹性属性似乎既不适用于弹性容器 button 也不适用于弹性项目 i 和 span。

所以 flex 项目是根据块格式化上下文而不是 flex 上下文显示的，因为它们是 blocks，所以它们出现在不同的行。

解决它的一种方法是将内容包装在容器中，并使其成为弹性容器，而不是按钮本身。

div {
  display: flex;
  align-items: center;
}
i {
  width: 12px;
  text-align: center;
  font-size: 22px;
}
i:before {
  content: "93";
}
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: "93";
  width: 12px;
  text-align: center;
  font-size: 22px;
}

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

Answer 3

正在应用 flex-shrink: 0 为我解决了这个问题

CSS flexbox 在 FireFox 中包装内容（不是 Chrome）

CSS flexbox wraps content in FireFox (not Chrome)

css

firefox

google-chrome

pseudo-element

flexbox