Flexbox兼容性(强调点燃火)

时间:2014-01-06 23:05:42

标签: css3 flexbox kindle-fire

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

我已经开始使用不同的显示属性,然后使用@support (display:flex)(flex-wrap:wrap)以逐步增强的方式定位支持flexbox的设备(如果它们支持flexbox赔率,则它们支持媒体查询)因此firefox在包装上没有问题(也使用-moz-的url-prefix),而kindle fire整体上没有问题,但我想知道是否还有其他解决方案?我的意思是这种方法几乎使布局代码加倍。

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

  

Firefox不支持以百分比指定宽度。

     

flex的IE10和IE11默认值为0 0 auto   而不是0 1 auto,根据规范草案,截至2013年9月。

     

Firefox不支持flex-wrap,align-content属性。

     

在IE10和IE11中,如果display: flexflex-direction: column的容器无法正确计算其弯曲儿童的尺寸,   容器有min-height但没有明确的height属性。

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

但我一直无法找到与点燃设备有关的任何内容。

1 个答案:

答案 0 :(得分:1)

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

仅支持〜标准语法,MSIE10语法(非常相似)和-webkit-遗留语法(用于android 2.x支持)

  • @supports尚未广泛推出

  • 用于特征检测我建议现代化;另外,在github上有各种插件可以测试特定的flexbox属性/值,或者你可以自己编写

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

  • flex:box从未存在,但(moz|webkit)box-flex:1display:(moz|webkit)box

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

  • flex-wrap:wrap不受广泛支持(firefox 29,chrome 21,msie11)所以你不应该使用它...如果你想要类似的东西你可以使用多列布局模块垂直流动或用于水平流动的内联块。遗憾的是,这是最好的选择

  • 百分比在firefox上工作(http://jsfiddle.net/RBaR2/)...缺少的百分比支持bug指的是旧的-moz-box语法,你不应该使用(真的很老的firefox)

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

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