Flexbox不能在iPad和Safari上工作 [英] Flexbox not working on iPad and Safari

问题描述

我在网站上使用flexbox，并在iPad Air，iPad 3和Safari PC上崩溃。

设计和代码与此代码类似。

任何建议如何解决这个问题？

解决方案

您可能需要考虑Safari浏览器对flexbox的支持。

虽然Safari 9支持所有标准flex属性，但是使用Safari 8和更早版本，您需要使用供应商前缀。

对您的代码进行调整：

  .container {
 list-style：none; 
 margin：0; 
 padding：0; 
 display：-webkit-flex; / * NEW * / 
 display：flex; 
 -webkit-flex-wrap：wrap; / * NEW * / 
 flex-wrap：wrap; 
 font-family：Open Sans; 
} 
  

请参阅flexbox浏览器支持： http://caniuse.com/#search=flexbox

考虑使用 Autoprefixer 。

请参阅带有前缀的flexbox代码示例：终极Flexbox作弊页

I'm using flexbox on a website and it crashes on iPad Air, iPad 3 and Safari PC.

The design and the code is similar to this codepen. http://codepen.io/anon/pen/xwJzEg/

display: flex;
flex-wrap: wrap;

This is how it looks on those devices where the problem occurs:

Any advice how to workaround this?

解决方案

You may want to consider Safari browser support for flexbox.

Although Safari 9 supports all standard flex properties, with Safari 8 and older you'll need to use vendor prefixes.

Make this adjustment to your code:

.container {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-flex; /* NEW */
    display: flex;
    -webkit-flex-wrap: wrap; /* NEW */
    flex-wrap: wrap;
    font-family: "Open Sans";
}

See flexbox browser support here: http://caniuse.com/#search=flexbox

Consider using Autoprefixer.

See flexbox code samples with prefixes: The Ultimate Flexbox Cheat Sheet

这篇关于Flexbox不能在iPad和Safari上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！