前端开发者学堂 - fedev.cn

解决Flexbox跨浏览器兼容Bug

#译文#Flexbox#sticky footer
发布于 大漠

**更新：**在发布之篇文章之后，我在Github上创建了一个Flexbugs库，用来回收Flexbox相关的Bug。主要宗旨是收集Flexbox跨浏览器存在的问题和解决方案。目标是让你使用Flexobx构建一个网站能得到你想要的效果，并且能在这里找到相应的解决方案。

早在2013年9月，我在测试我的Solved by Flexbox项目时，在IE10和IE11中发现了一个Bug，就是Sticky footer实际上不会粘贴在页面的底部。我花了很多时间来解决这个问题，但始终没有成功。

起初，我真的很生气。在Flexbox出现之前，如果在不知道页脚的确切尺寸情况之下，要使用纯CSS来实现Sticky Footer的效果是不太可能。Flexbox改变了这一切，可以使用CSS解决这个问题。

失望之后，我最终得出一个结论，这不是什么大不了的事情。我的意思是，从渐进增强的角度来看，我的解决方案还是相当不错的。虽然它在IE并不完美，但不至于坏得一塌糊涂，内容依然可以访问，它只会在较小的内容页面上展示，而在较长的页面上，它看起来和Chrome、Firefox、Opera和Safari浏览器得到的展示很像。

几周前，我在Github看到一个新的请求，在IE下使用@media规则来解决Sticky Footer的问题。这让我再次思考起这个问题，我决定找到一个特定的解决方案，而不再使用任何浏览器特殊的Hack技巧。

事实证明了是有相应的解决方案可以实现的，也再次证明了我自己还是不够努力。

在这篇文章中，我将解释这个解决方案，并且讨论一些我在浏览器中发现的的Bug。并且对相应的Bug提出一些修复建议，让Flexbox能更好的实现跨浏览器的兼容。

##有哪些Bugs呢？

Flexbox规范还没有最终确定，所以自然会有一些最新的草案和浏览器实现滞后现象。本文不打算在背后对任何组织进行指指点点，他们的目的是帮助我们做前端开发的人员管理好浏览器的不一致。

下面列出了我在制作Sticky Footer案例时在各个浏览器是碰到的问题清单：

  • 在IE10~11浏览器中，flex项如果设置了最小高度（min-height）将会忽略它们的父容器的高度(height)；
  • Chrome、Opera和Safari浏览器中flex项目没有最小内容的概念；
  • IE10~11在flex标准中不允许出现不带单位值的flex-basis

###min-height的问题

在IE10和IE11中，min-height属性可以设置flex容器列方向的大小，但是，如果容器的flex项目在不知道他们父容器的大小时，也就是没有给他们父容器设置height时，设置min-height将会失效。

这个问题就存在我的Sticky Footer案例中，因为Sticky Footer布局中就需要给内容设置一个min-height为100%（或100vh）的声明，确保内容区域至少和浏览器窗口的高度是一样高。

既然flex项目无法识别min-height，我们就需要找到另一种能让其工作的方式。

###flex项目内容最小尺寸

当一个大的flex项目放到flex容器中时，其他的flex项目就会相应的变小(这就是flex布局的算法)。flex-shrink会根据内容来进行计算。但许多浏览器刚好与其相反，他们不应该允许flex项目无限的缩小。他们小到最低宽度或高度的声明时不应该再继续缩小，如果没有声明最低宽度或高度，应该缩小到其内容的尺寸为止，不再继续缩小。

Flexbox规范是这样描述的：

默认情况下，flex项目收缩后不会低于其最小内容尺寸（最长单词的长度或固定大小的元素）。为了改变这一状况，给flex项目设置min-height或min-wdith属性。

Chrome，Opera和Safari目前已经忽略了这个规范，让flex项目可以缩减为零。作为一个结果，你的内容就会重叠在一起。

###不带单位的flex-basis

之前发布的IE10版本的flexbox规范时表示，flexbox项目在使用flex要需要设置单位。

如果更想的大小是“0”，它必须指定一个单位（如0px）以避免歧义；不带单位的”0“要么被视为灵活性，要么被视为一个语法上的错误。

这不是真正的规范，但IE1011仍然把它当作是真实的。如果您使用flex声明了一个1 0 0，那么这个规则在IE1011中将被视为是一个错误，整个规则的灵活性将被浏览器忽略。

##找到一个替代Sticky Footer的解决方案

我选择Sticky Footer布局做为本文的主要例子，那是因为遇到很多人都在想找到一个跨浏览器的解决方案。但是在我们正式进入介绍细节之前，先让确认一下我们都是在同一个页面上。

下面是我用来制作Sticky Footer布局的结构：

<body class="Site">
  <header class="Site-header">…</header>
  <main class="Site-content">…</main>
  <footer class="Site-footer">…</footer>
</body>

遵循规范的浏览器使用下面的代码可以实现Sticky Footer布局效果：

.Site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.Site-content {
  flex: 1;
}

现在正如我们提到的，这个CSS是可以正常工作，但是不是所有浏览器都完全遵循规范的，所以在一些浏览器中，他是存在问题的。

如果你是一位有经验的前端开发人员，你应该知道，任何解决跨浏览器的问题，不仅要让他今天能正常工作，还需要保证你的项目完成后续也能正常工作。

解决方案取决于解决方案的任何行为。

到目前为止，基于前面所说的一切，我个人的要求是，找到解决Sticky Footer布局的替代方案，其必须满足：

  • 在所有浏览器下都能正常工作
  • 浏览器修复了这些不良的行为也要能继续工作
  • 不依赖浏览器任何特殊的Hack手段

###使用height替代min-height

如果你做前端开发有一段时间的话，你应该记得IE6中永远都不支持min-height（或者min-width）属性。然而，在解决这个问题时，总是使用height:100%来替代min-height:100%。因为浏览器对其解析出来的效果是一致的。因此，在制作Sticky Footer布局时，建议像在IE6中的解决方案一样，设置一个height:100%。

知道这一点之后，我试过了我的找到的第一个解决方案，就是使用height:100 vh来替代min-height: 100vh。经过测试，他确实能在IE中正常工作，但它不能在Chrome中工作，所以我立即记录下来了。

事实证明，我们应该认真的了解规范，而不能一味的认味Chrome是正确的，IE就是错误的。

在CSS中，你通常都会使用min-height来替代height避免内容超过高度是溢出问题。当有太多的内容时，你显式的设置了height值，这也就意味着，内容要被剪切，重叠或出现滚动条。在很多情况之下，这些都是不好的表现形式。然而，当你在body元素上这样处理时（就比如Sticky footer布局），出现滚动条并没什么大不了的。其实这也正是你想要的。所以在body元素上显式定义height:100 vh和有太多内容时，其表现的结果应该是一样的。

那么问题来了：为什么在Chrome浏览器中不能正常工作呢？

###最小尺寸的问题

前面我提到过，一些浏览器错误地将flex项目缩减到小于其默认内容的尺寸，导致内容重叠。这也就是为会要将min-height换成height，但我在Chrome浏览器中测试时，不能正常工作。

页头，页脚和内容元素都缩小到元素内容最小尺寸（但不是更少）时会发生些什么呢？如果这些元素（组合）有更多的内容在屏幕上，body元素应该与滚动条溢出是一样的。页头、页脚和内容元素都应该正常显示，一个在另一个之下，没有重叠在一起。

Chrome发生了什么，而不是允许页头，页脚和内容元素收缩小于默认内容的最小尺寸。其结果是body元素并没有溢出，而发生在页头，页脚和内容元素自身上。由于这些元素的overflow默认值是visible，他们的内容是会相互层叠的。页脚是固定在页面底部，而页面主内容是溢出和其层叠在一起。

幸运的是，有一种简单的方法可以解决这个问题。

Flexbox规范定认了一个flex-shrink属性，其默认值为1，表示的是其flex项目缩小不应小于其内容默认的最小尺寸。你也可以使用flex-shrink:0;取得flex-shrink:1相同的表现形为。如果元素的大小是根据其子元素的来决定，并没有设置width、height或flex-basis值，然后设置flex-shrink:0;可以取得同样的效果，来避免前面提到的错误。

###避免没单位的flex-basis

不带单位的flex-basis的Bug是几个Bug中最为简单的一个，但它可以说也是最难跟踪的。

原来在解决Sticky Footer问题时，在content元素上声明了flex:1。因为flex:1是flex: 1 1 0px的简写，而且自从知道不需要任何缩放时，我决定使用flex: 1 0 0px。

这个一直都能正常工作，直到我在IE中测试为止。

IE中存在一个组合的漏洞和CSS的压缩：为了缩小CSS文件大小，常常将1 0 0px省略单位值1 0 0(没有带单位的flex-basis值)。因此IE10~11完全忽略了这个声明。

一旦发现了问题根源所在，那么解决办法就微不足道。设置一个明确的flex-basis值，或在使用flex简写值时，使用flex:0%。注意，使用0%比0px强。

##将他们放在一起

下面将本文讨论的Bug和相应的解决方案，总结到一起：

  • 在IE10~11浏览器,min-height不适合于flex容器的子元素flex项目。如果可能的话，使用height来替代min-height。
  • 在Chrome，Opear和Safari浏览器不识别flex项目内容的最小尺寸。可以设置flex-shrink的值为0（而不是默认的1），以避免不必要的收缩。
  • 不使用无单位的flex-basis值，因为在IE10~11中，flex简写被忽略。常使用0%来替代0px。

记住所有的缺陷和解决方法，这是我最后想出的替代解决方案。它可能没有最初那样清爽，但它满足我们所有要求的一个解决方案：

  • 它可以在所有浏览器中工作
  • 规范的兼容性，错误是有，但可以继续工作
  • 不使用任何浏览器的特定hack

我在CSS中添加了注释，来解决那些解决方法：

/**
 * 1. Avoid the IE 10-11 `min-height` bug.
 * 2. Set `flex-shrink` to `0` to prevent Chrome, Opera, and Safari from
 *    letting these items shrink to smaller than their content's default
 *    minimum size.
 */
.Site {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 1 */
}
.Site-header,
.Site-footer {
  flex-shrink: 0; /* 2 */
}
.Site-content {
  flex: 1 0 auto; /* 2 */
}

可以点击这个案例，查看使用Flexbox解决Sticky Footer的方案。

##脚注：

  • 从技术上讲，如果不需要兼容IE7以及其以下版本，在不知道页头和页尾高度时，创建一个Sticky Footer布局可以使用display:table;。在实现跨浏览器，要使用浏览器的Hack，可以说不是一个实际解决方案。
  • 这里所说的”所有浏览器“，我指的是所有实现2012年3月或更新发布的Flexbox规范的浏览器。换句话说，支持flexbox的现代浏览器。
  • 使用flex-basis:0解决大多数问题，但不是全部问题。如果你想让flex项目收缩不小于默认内容大小，这个解决方案是行不通的。
  • 2014年3月更新的flexbox规范改变了flex:1含义，从1 0 0px变成1 0 0%。也就是说flex:1的简写相当于是flex: 1 0 0%。

本文根据Philip Walton的《Normalizing Cross-browser Flexbox Bugs》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/。