Ceeji 笃志者 - 宁心勉学,慎思笃行
Recent content in Ceeji 笃志者 on 宁心勉学,慎思笃行
马上订阅 Ceeji 笃志者 - 宁心勉学,慎思笃行 RSS 更新: https://ceeji.net/blog/feed/
近期遇到的几个布局兼容性汇总
2016年11月11日 01:59
(实时更新)
flex 可伸缩元素比例不正确(Android 4.0 - 4.3,iOS 低版本)
使用 flex 布局,在现阶段已经是非常靠谱的方案了,因为 flex 布局已经在大多数主流浏览器中兼容。但是,flex 布局还是有不少需要注意的兼容问题。
在 Android 4.0 - 4.3 和部分低版本 iOS 中,可伸缩元素(大小按比例缩放的元素)如果要确保比例正确,必须设置:
xxx {
width: 0px;
}
其中,width,一般设置为 width: 0 或 1px、0.001% 等。
如果不设置,那么一旦 flex 的子元素的实际内容超过了按照伸缩比例应该拥有的宽度,在这些有 bug 的系统中就会出问题,具体表现是**子元素的宽度将根据实际宽度进行延伸,最多可以占据整个屏幕的宽度(即使它的 flex 布局的父元素设置了宽度,它自身仍然可以撑开以达到整个屏幕的宽度)。