Question

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

JSFiddle

这里有谁错？是FF还是Chrome（和我）。我应该怎样做才能在任何一个浏览器中获得相同的结果（文本前的图标，垂直中心，没有换行）？

Answer 1

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

具体而言，根据spec：

，会发生的情况是，flex项被屏蔽

display的flex item值为blockified：if 元素的in-flow子节点的指定display 生成flex container是一个内联级别的值，它会计算到它的块级等价物。

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

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

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

解决这个问题的一种方法是将内容包装在容器中，然后将其设置为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>

Answer 2

您需要指定display: -moz-box;才能使用FF。查看更新后的Fiddle。

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

2 个答案: