显然 Firefox 不喜欢按钮上的 display: flex
。有办法纠正这个问题吗?
CSS:
button {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
button div:first-child {
-webkit-box-ordinal-group: 2;
-webkit-order: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
order: 2;
}
button div:last-child {
-webkit-box-ordinal-group: 1;
-webkit-order: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
order: 1;
}
HTML:
<button>
<div>
<p>First</p>
</div>
<div>
<p>Second</p>
</div>
</button>
最佳答案
tl;dr:只需将一个 div 放入您的 <button>
中即可,并制作那个 div display:flex
.
参见 https://bugzilla.mozilla.org/show_bug.cgi?id=984869#c2为什么display
在 <button>
上没有做您期望的事情在 Firefox 中(以及出于类似原因在 Firefox 或 Webkit/Blink 中不起作用的类似事情)。
这是您修改后的 jsbin:http://jsbin.com/ziwadabo/4/
关于css - Flexbox 在 Firefox 的按钮中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24289251/