Flex 布局在各家浏览器下的一些bug，尤其是IE

  1. Safari 10 and below uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto. see bug. Fixed in all versions > 10.
  2. IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation
  3. 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. See bug.
  4. Firefox 51 and below does not support Flexbox in button elements. Fixed in version 52.
  5. IE 11 does not vertically align items correctly when min-height is used see bug
  6. Flexbugs: community-curated list of flexbox issues and cross-browser workarounds for them
  7. In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.
  8. In Safari 10.1 and below, the height of (non flex) children are not recognized in percentages. However other browsers recognize and scale the children based on percentage heights. Fixed in all versions > 10.1 (See bug) The bug also appeared in Chrome but was fixed in Chrome 51

 

1. Safari 10 及以下用 min/max width/height 这些声明来渲染弹性伸缩项目的尺寸，但是如果容器包含多行项目，它不会计算有多少项目在同一行上。相反它只简单计算 flex-basis 的值，如果flex-basis 值未设置，默认为auto的话，则使用弹性项目设定的宽度。原文提供了该bug链接 - Safari (WebKit) doesn't wrap element within flex when width comes below min-width，给弹性伸缩项目宽度设定min-width后，在Safari浏览器中不会换行，这个bug在10以上的版本已修复。

2. （该被扫进历史垃圾堆的IE8,9不支持flex。IE10以后支持了，要加-ms-前缀。就算是IE11，也不省心。来自本喵団団的吐槽）

在IE11下，flex: 0 1 auto; 第三个参数要加一个单位。（第三个参数就是flex-basis属性的值。这个值可以是数字，比如长度单位或者百分比，也可以是auto，长度根据内容决定。）

看这里提供的链接，see MSFT documentation。

这里提到，微软发布的新浏览器，Microsoft Edge对于flex-baisis的兼容情况：

不再支持 -ms-前缀，

支持flex-basis的值为auto，既长度等于项目的长度，如果未指定长度，根据内容决定。

Windows Phone 8.1 的IE 和 微软Edge，可支持 -webkit-flex-basis 别名。

3. IE10、11-preview：flex容器如果设定了属性flex-direction: column, 以及min-height，但是未设定高度，在计算子项目的尺寸时将出现偏差...这个bug已经在Edge解决。

（微软的意思是，该进垃圾堆的老旧浏览器就赶紧扔掉，鼓励用户更新新的浏览器版本。又不是安全问题，反正宝宝就是不修复IE10的这个跟安全问题无关的bug。）

4. Firefox 51及以下版本不支持按钮元素作为弹性容器，版本52已修复。 Flexbox in button elements. （按钮元素比较特别，它不仅仅不支持flex，还不支持overflow:scroll, display:table等等。）

5. IE 11： Flex容器如果设定了min-height，那么 align-items: center; 不起作用。see bug

(看bug链接里描述的，设定height:auto; 并设定min-height,  align-items: center不能让容器下的项目垂直居中。)

6.Flexbugs: 这是个gitub地址，精选了一些flex容器问题以及跨浏览器的解决办法。目的是提供flex布局下出现bug的解决方案。

7. IE 10：felx的默认值是 0 0 auto。而最新规范的默认值是 0 1 auto。（第二个参数是flex-shrink，规范默认为1，如果空间不足，该子项目将缩小。而IE默认为0，则默认项目不缩小。）

DeclarationWhat it should meanWhat it means in IE 10
(no flex declaration) flex: 0 1 auto flex: 0 0 auto
flex: 1 flex: 1 1 0% flex: 1 0 0px
flex: auto flex: 1 1 auto flex: 1 0 auto
flex: initial flex: 0 1 auto flex: 0 0 auto

8. Safari 10.1 及以下版本：弹性伸缩项目的高度如果设置为百分比，无法被识别。10.1以后的版本，以及在Chrome51版本，这个bug得到修复。

 

下一篇将重点介绍IE浏览器，毕竟IE不奇葩谁奇葩

posted @ 2017-07-09 09:26  kiera  阅读(2701)  评论(0)  编辑  收藏  举报