html - -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 被列为支持当前标准，而不是任何旧草案。