flexbox在android4.1及之前的版本兼容性问题

经过了一番实践和一些基本的兼容处理,至少在移动端flexbox还是有可为的(安卓4.0+,2.3+没测试,ios都还行)。但是坑也确实还有很多。
1,flexbox有多个版本,在低版本安卓下实行的是09年的旧版标准Flexible Box Layout Module
这个标准需要添加-webkit-前缀。其余的实行的是新的flexbox标准CSS Flexible Box Layout Module Level 1,其中ios9以下Safari需要添加-webkit-前缀。
2,旧版flexbox标准各浏览器支持属性有限,比如说不支持flex-wrap等。所以如果考虑兼容性的话需要只使用旧版标准中浏览器可以支持的属性。
3,还是旧版的问题,旧版的使用比例伸缩布局时会导致盒子内容大小不等会导致无法‘等分’等布局。这个时候需要设置width:0%;等把原始大小设置成0。
4,依旧是旧版的问题,旧版的box item要求属性是块级结构,所以很多inline元素需要设置display:block等才能显示正常。
5, 新发现 text-overflow: ellipsis;在display:flex元素上无效。


作者:龙博韬
链接:https://www.zhihu.com/question/29924791/answer/46255686
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
阅读更多
想对作者说点什么?
相关热词

博主推荐

换一批

没有更多推荐了,返回首页