ios - 显示 : flex; doesn't work on iPad (both Chrome and Safari)

Question

此代码在计算机上按预期工作，但完全无法在 Chrome 47 for iPad 和 Safari for iPad 上呈现 display: flex(横向 View ，宽度 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。

根据您包含的 display: -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 优势。