显然,Firefox不喜欢显示: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显示:flex。
请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=984869#c2为什么显示器不会执行您期望的内容< button>在Firefox(和类似的事情,在Firefox或Webkit / Blink中不起作用的类似的东西)。
这是你修改后的jsbin:http://jsbin.com/ziwadabo/4/