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

我有一个

按钮

，它由一个

和一个

元素（一个图标和一些文本）组成。现在两者都有不同的尺寸，所以我在我的按钮上应用了一个flexbox，它可以很好地居中放置我的物品。在Chrome中，一切都如我所期望的那样工作，但在当前FF中使用页面会导致包装按钮的内部内容。图标通过

：before

伪元素显示

---

谁错了？是FF还是Chrome（还有我）。我应该如何在两种浏览器中获得相同的结果（文本前的图标、垂直中心、无换行）？

您需要指定

显示：-moz框在FF上工作。检查更新后的文件。
<代码>按钮

元素有一些与flexbox冲突的特殊行为

具体来说，发生的情况是flex项被阻塞，根据：

a的值为：如果 元素的子流中的指定值 生成是一个内联级别的值，它计算 到其块级别等效

因此，

i

和

span

将成为

inline

，成为

block

s

但是，flex属性似乎既不适用于flex容器

按钮

，也不适用于flex项目

i

和

span

因此，flex项是根据块格式上下文而不是flex项显示的，因为它们是

block

s，所以它们出现在不同的行中

一种修复方法是将内容包装在一个容器中，使其成为flex容器，而不是按钮本身

div{
显示器：flex；
对齐项目：居中；
}
我{
宽度：12px；
文本对齐：居中；
字体大小：22px；
}
i:以前{
内容：“\2193”；
}
跨度{
字体大小：16px；
右边距：10px；
}

正文

Hi。我将Sass与mixin一起使用，该mixin应该发展为

-moz-box

（或

-webkit-flex

，…），但我的FF只使用

flex

。看看这个同时使用这两种功能的提琴（就像我的mixin一样）：问题仍然存在，因为FF选择了

flex

over

-moz-box

。顺便说一句，它在使用

-moz-box

显式时工作正常。将顺序更改为使

-moz-box

win:

显示：flex；显示器：-moz盒这很有效。但我一直认为，在所有回退之后，应该使用标准属性作为最后一个属性？！对但是FF是不同的。只要我玩css，FF总是击败我，强迫我玩诡计，诡计和诡计D
display:-moz-box
实际上没有任何效果——它所做的只是抑制
display:flex
（以及它的阻塞特性）；它实际上并没有给你一个flexbox。建议的
显示：flex；display:-moz-box
的行为（在Firefox中）是因为没有设置
display
。如果您确实希望按钮是flexbox，那么需要将其内容包装在包装器div中，并给出
display:flex；弹性流：。。。；调整项目：。如上所述，这是同一个问题，这是同一个问题，请看我的答案：基本上，如果您希望按钮成为flex容器，那么最好在按钮内部添加一个包装器，并将该div设置为
display:flex
。谢谢。我想把
I
和
span
也包装成
div
，它可能会工作得很好。无论如何，我找到了一种不使用flexbox的方法。我刚刚给了按钮一个
display:table和子项
显示：表格单元格；垂直对齐：中间对齐这很好用。仅供参考：我正在使用FontAwesome库作为我的图标，因此我必须使用
I
元素：）