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屋!