标签: 前端、移动端
关于flex布局,W3C算是出了好多套的规范,但是对各个浏览器的兼容性问题,那就真的不敢恭维。
- W3C 2009年第1次草案:display:box
- W3C 2011年第2次草案:display:flexbox | inline-flexbox
- W3C 2012年第5次草案及以后的候选推荐标准:display:flex | inline-flex
以前一直以为新标准的display: flex 能够完全替代display: -webkit-box,然而并不能。
** 开发中发现,iOS8下的微信内置浏览器与Safari不支持display:flex的写法。**
解决方案
//好长一段,包括三个版本的写法flex、flexbox、box
.flex-container {
display: -moz-box; /* Firefox */
display: -ms-flexbox; /* IE10 */
display: -webkit-box; /* Safari */
display: -webkit-flex; /* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
align-items: center;
}
另外,weui的0.4测试版本并没有做flex的兼容性优化,一直到1.0版本才加入兼容熟悉,所以慎用。
作者 @郑小明
2016 年 10 月 20 日