跨浏览器Flexbox兼容性问题

时间:2017-01-25 18:37:05

标签: css cross-browser flexbox

我正在建立一个必须与Cordova包含的至少IE10 +,Chrome,Firefox和iOS兼容的网络应用程序。

它在Chrome上运行良好。但事实证明,每当我在IE或Firefox上修复附带错误时,它就会在iOS上创建一些错误,反之亦然。

最近的问题是由Firefox和iOS引起的。在修复之前,iOS正在工作(overflow-x滚动得很好)但是Firefox不尊重它的父宽度,而右侧的弹性框已经不在屏幕上了。一旦我在Firefox上解决了问题,溢出滚动就不再适用于iOS了。

关于IE10,一些嵌套的flexbox也不会尊重父母的宽度,最后一个框离屏幕一半(?)。

您是否拥有使用flexbox进行跨浏览器开发的可靠来源?我已经尝试过一些指南,但是它们有助于修复某些浏览器上的错误并在其他浏览器上创建一个新错误...

编辑:一个比较表,解释每个浏览器如何处理属性会很棒。

感谢。

2 个答案:

答案 0 :(得分:2)

使用flexbox可能无法实现您想要实现的目标,而您所列出的所有浏览器都不会完全支持它。

众所周知,Flexbox在IE10上存在问题,并且可能需要在许多正在构建的浏览器上使用前缀。以下是查找哪些浏览器完全支持任何给定功能的好资源:http://caniuse.com/#search=flexbox

您可能会发现"已知问题"与确定您所遇到的问题是否有关的相关部分。

有关您遇到的错误的一些具体信息可能有助于提供更具体的答案。

答案 1 :(得分:0)

听起来你想要这个:

https://github.com/philipwalton/flexbugs

自编为"社区策划的Flexbox问题列表及其跨浏览器的解决方法。"