display:flex 向下兼容写法

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2873 天前的主题，其中的信息可能已经有所发展或是发生改变。

安卓机上的口碑 APP 内嵌网页完全不支持 flex 写法,甚至 display:box 也不支持,只能改为 display:block.

那么在 css 上应该如何写兼容写法?

我写了

dislpay:block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

没用...

写下面又会导致都变成 Block 了,巨麻烦

display

flex

写法

block

4 条回复 • 2017-01-06 12:56:38 +08:00

newbieooOO

2017-01-06 11:23:53 +08:00

你需要 Modernizr 和 Autoperfixer

murmur

2017-01-06 11:26:44 +08:00

display:-webkit-box;

display: -webkit-flex;

display: flex;

-webkit-box-flex: 1;

-webkit-flex: 1;

flex: 1;

-webkit-flex-flow: row;

flex-flow: row;

线上我们用的这个版本 4.2 是可以支持的安卓 4 以下就没试

murmur

2017-01-06 11:27:35 +08:00

内嵌页面就老实用流式布局你还想嵌出一个 app ？纯贴图都够了

hoythan

2017-01-06 12:56:38 +08:00

@newbieooOO Autoperfixer 不能用.

@murmur 也不行.

内嵌的是 UC1.0 版浏览器解决办法就是不用 Autoperfixer 自己写成以下格式:

display: -webkit-box;
dislpay:block;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

然后里面的用 float 替代.