-webkit-flex在Android上无法正常显示

Question

在实现了精彩的功能之后display:flex,我制作了一个网页,在Windows上从Chrome 26查看时,它看起来就像我想要的那样.但是,它在我的Android上的Chrome 26中不起作用,也不能在我的模拟器中的Android浏览器4.1中运行.根据caniuse,所有这些浏览器都应该支持它.

也许巧合的是,它在Android中看起来的样子(据我所知)与我切换到旧版本时的样子相同display:box.

以下是Windows与Android的相似之处:

我的问题是,我该如何防止这些跨设备问题？也许使用除flex以外的东西,直到它变得更加标准为止会更好.任何人都可以提供一个不使用flex的工作示例,或者适用于Android的工作示例吗？这适用于移动网络应用.任何帮助深表感谢.我的代码链接如下.

使用-webkit-flex:JSFiddle

带框:JSFiddle

Answer 1

有3个Flexbox草稿具有不同的属性/值,需要注意.Caniuse仅区分支持当前草案的浏览器("支持")与支持任何旧草稿("部分支持")的浏览器.

为了最大化浏览器支持,您只需包括从最旧版本到最新版本的所有版本.

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.bar {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

虽然所有Android版本目前都支持旧的2009版本,但未来可能会放弃它们以支持标准属性.另请注意,Blackberry 10被列为支持当前标准,而不是旧草案.

Answer 2

对于那些好奇的人，我最终完全重写了我的代码以不使用 flex。这是 JSFiddle 的链接，它非常适合我的目的。http://jsfiddle.net/8juSk/

它使用@cimmanon 的box建议box-ordinal-group。