Question

此代码在计算机上按预期工作，但完全无法在适用于iPad的Chrome 47和适用于iPad的Safari上呈现display: flex （在横向视图中，宽度为1024像素）。

这很奇怪，因为很长一段时间以来，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;到#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引擎...它只是一个网页浏览器，因此我们无法获得Android设备上所有最新的Chrome版本。

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

1 个答案: