显示：flex; 不适用于iPad（包括Chrome和Safari）

此代码在计算机上按预期方式工作，但完全无法呈现display: flex在Chrome 47 for iPad和Safari for iPad （横向视图，宽度为1024 display: flex上均为display: flex 。

这很奇怪，因为很长一段时间以来，Chrome应该很好的支持flex 。

 * { 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; to #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引擎…这只是一个web视图，所以我们没有得到所有最新的Chrome善良，我们在android设备上。