css - Flexbox 兼容性(强调 kindle fire)

Question

所以我有一个关于 Kindle 设备上的 flexbox 支持的问题，如果你有关于总体支持的更多信息。似乎不支持 display:flex 和 flex-wrap:wrap/nowrap 属性，至少在早期的 kindle fire 设备上是这样(我读过它是在较新的但无法测试)。它看起来像 flex:box(但是支持旧版本的 flexbox)。

我已经开始使用不同的显示属性，然后使用 @support (display:flex) 或 (flex-wrap:wrap) 来定位支持的设备flexbox 以逐渐增强的方式(如果他们支持 flexbox 赔率他们支持媒体查询)所以 firefox 没有问题包装(也使用 url-prefix for -moz-)，而 kindle fire 总体上没有问题，但我想知道如果有另一种解决方案？我的意思是这种方法几乎使布局代码增加了一倍。

www.caniuse.com仅声明 opera-mini 5-7 和 IE 8-9 缺乏支持，并且存在以下已知问题:(还显示我使用 AutoPrefixer 解决的供应商前缀)

Firefox does not support specifying widths in percentages.

IE10 and IE11 default values for flex are 0 0 auto rather than 0 1 auto, as per the draft spec, as of September 2013.

Firefox does not support flex-wrap, align-content properties.

In IE10 and IE11, containers with display: flex and flex-direction:
column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.

并且有一篇关于跨浏览器支持的文章:http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

但我一直无法找到与 kindle 设备相关的任何信息。

Answer 1

遗憾的是，它加倍并且可能更多的布局代码，这就是为什么恕我直言你不应该使用，例如 flex-wrap 因为它只在 chrome21+ 上可用，因为它会带你创建一个完全不同的布局

仅支持 ~standard 语法、MSIE10 语法(非常相似)和 -webkit- legacy 语法(用于 android 2.x 支持)

• @supports 尚未广泛使用

• 对于特征检测，我建议使用 modernizr；另外，在 github 上有各种插件可以针对特定的 flexbox 属性/值进行测试，或者您可以自己编写它们

• 但是 kindle fire 是 android 2.3，那么它很可能使用 Webkit 533，因此它支持传统的 flexbox -webkit- 语法

• flex:box 从未存在过，但是 (moz|webkit)box-flex:1 和 display:(moz|webkit)box

• 默认值不是问题，只需执行 *{...} 来规范化它们

• flex-wrap:wrap 没有得到广泛支持(firefox 29、chrome 21、msie11)所以你不应该使用它...如果你想要类似的东西你可以使用垂直流的多列布局模块或水平流的内联 block 。可悲的是，这是目前最好的选择

• 百分比适用于 firefox ( http://jsfiddle.net/RBaR2/ )...缺少百分比支持错误是指旧的 -moz-box 语法，你不应该使用它(真的很老的 firefox)

http://dundalek.com/css3-flexbox-reference/

http://zomigi.com/blog/flexbox-syntax-for-ie-10/