文章/答案/技术大牛

发布

社区首页 >问答首页 >显示: flex；不适用于iPad ( Chrome和Safari)

问显示: flex；不适用于iPad ( Chrome和Safari)
EN

Stack Overflow用户

提问于 2016-04-26 23:02:09

回答 1查看 11.8K关注 0票数 9

此代码在计算机上正常工作，但完全无法在Chrome 47上呈现 iPad ，在iPad上呈现(在全景视图中，宽度为1024 in)。

这很奇怪，因为很长时间以来，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>

怎么了？

css

google-chrome

responsive-design

flexbox

ios

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-27 21:34:58

如果您的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引擎.这只是一个网页，所以我们没有得到所有最新的Chrome，我们得到的android设备。

票数 9

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36877321

复制

相似问题

问显示: flex；不适用于iPad ( Chrome和Safari)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示: flex；不适用于iPad ( Chrome和Safari)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示: flex；不适用于iPad ( Chrome和Safari)
EN