显然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>
答案 0 :(得分:30)
tl;博士:只需在您的<button>
内加一个div,然后将 div display:flex
。
请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=984869#c2了解display
为什么不能在Firefox <button>
中做出您期望的事情(以及在Firefox或Webkit /中不起作用的类似事项)眨眼,出于类似的原因)。
这是您修改过的jsbin:http://jsbin.com/ziwadabo/4/