Flex 布局在各家浏览器下的一些bug，尤其是IE - kiera - 博客园

标签： | 发表时间：2019-07-11 10:29 | 作者：
出处：https://www.cnblogs.com
  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，则默认项目不缩小。）

Declaration What it should mean What 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不奇葩谁奇葩


链接：

https://github.com/philipwalton/flexbugs


相关 [flex 布局 浏览器] 推荐：

Flex 布局在各家浏览器下的一些bug，尤其是IE - kiera - 博客园

- -
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以上的版本已修复.

移动端flex布局实战

- -
做过移动端的同学都知道移动端布局太难了，终端太多了，传统的布局方式已经力不从心，各种新的布局方式被发明. 在flex之前，传统布局有流式布局（就是默认的方式），绝对定位布局，弹性布局（em），和浮动布局，其中浮动布局并不是为布局而设计的，使用起来略显繁琐. 2009年，对前端来说是不平凡的一年，html5定稿，es5.1发布，flex应运而生，天生响应式，生而为布局，使用及其简单.

Flash与Flex路在何方？

- chris - 伯乐在线 -博客
　　注：本文转载自InfoQ - 张龙. 　　Adobe想要强化Flash与Flex在企业，特别是在移动领域中的地位. 但最近的一项调研表明jQuery已经超越了Flash，成为前17,000个网站首选的Web部署解决方案. 　　近日，来自Adobe Systems开发工具事业部的产品经理Andrew Shorten在Adobe的官方博客上发表了一篇博文，谈到了Flash与Flex的当前状态，并就Adobe的旗舰平台给出了自己的一些看法.

使用 viewport meta 标签在手机浏览器上控制布局

- - 我爱水煮鱼
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分. 移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持.

写编译器：学习GNU Flex，写一个词法分析器

- zffl - Xiaoxia[PG]
以下内容仅为个人学习笔记，非正规教程，难免有疏漏之处，请指出. 目标要分析词法的对象是一种叫TINY+的计算机语言. char str; int x, fact; str:= 'sample program in TINY+ language- computes factorial'; read x; if x>0 and x<100 then {don’t compute if x<=0}.

Java与Flex学习笔记----用CSS控制页面样式

- - BlogJava-首页技术区
以前对于Flex网页布局还不是很明白，基本上没有什么修饰. 但是做完了一个仿“115网盘”的页面后，对页面控制有了一个基本的了解，现总结一下.      本人一开始接触的就是Flex4，据说Flex3的css布局很脊椎，也不知道是不是这样. 但是Flex4的网页布局很牛X，再配上各种事件，可以实现需要写很多JavaScript/Ajax代码才能实现的效果.

跨平台工具详解之二：Adobe Air/Flex

- - Web App Trend
Adobe位于CaliforniaSan Jose，成立于1982年. Adobe在NASDAQ上市，拥有1万名左右的员工，仅2011年一年的税收超过40亿美金. Adobe的核心业务是开发出专业的设计创意工具，比如，Photoshop和Dreamweaver，数字化演示解决方案，包括Acrobat PDF和Flash，其中Flash是由Adobe收购Macromedia而来.

Flex与java通过BlazeDS实现通信（简单Demo）

- - CSDN博客推荐文章
因为对于flex本人也是新手，此前按照网上的各种方法进行试验，都没能实现flex与java的通信. 也许是eclipse和tomcat版本的问题. 后来经过几天的尝试，终于成功了. 现和大家分享一下，希望和我一样曾经饱受困扰的同胞们，能够根据我的Demo，配置成功. 2、Myeclipse 8.5 (或以上版本).

Adobe 声明对Flex的态度及日后的承诺

- - ITeye资讯频道
去年11月份， Adobe宣布贡献出Flex SDK代码，并与该项目基金会一道将Flex SDK捐献给一家新设的开源基金会. 今天， Adobe关于对Flex的态度及日后的承诺作出声明，总结如下：. Flex归Apache，社区模式管理，Adobe派工程师团队参与；. 在企业级开发领域，Flex至少在未来几年内仍占据优势；.