近期遇到的几个布局兼容性汇总

(实时更新)

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 布局的父元素设置了宽度,它自身仍然可以撑开以达到整个屏幕的宽度)。

当前页阅读量为: