显示:flex; 不适用于iPad(Chrome和Safari)

Question

此代码在计算机上按预期工作,但完全无法渲染display: flexChrome 47 for iPad和Safari for iPad(横向视图,宽度1024px).

这很奇怪,因为flex很久以来Chrome应该得到很好的支持.

* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { flex: 1; background-color: yellow; }

<div id="header">
  <div id="topleft">Topleft</div>
  <div id="topmid">Topmid</div>
  <div id="topright">Topright</div>
</div>

怎么了？

Answer 1

如果您的iPad没有运行iOS 9,则需要添加-webkit-flex:0 0 155px; 到#topleft,-webkit-flex:0 0 40%; 到#topmid,和-webkit-flex:1; 到#topright.

根据您包含的显示做出假设:-webkit-flex;

所以,你是新的CSS可能看起来像:

* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { -webkit-flex: 0 0 155px; flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { -webkit-flex: 0 0 40%; flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { -webkit-flex: 1; flex: 1; background-color: yellow; }

此外,iPad上的Chrome仍然使用Safari引擎...它只是一个webview,所以我们没有得到我们在Android设备上获得的所有最新的Chrome.