IE7，你准备好了没？

二〇〇六年十一月七日

您可以把本篇当做是《与臭虫为友——浏览器补救办法，臭虫以及解决方案》三系列的第四系列。

其实，对于专职于 web 标准的人来说，我们在 IE7 Beta1 的时候就准备好了，XD。不信可以看看针对 IE7 的 CSS Hack，如果你是沉迷于各种 hacks 的人，务必务必要看！各位知道我从不转载的作风，所以，给 old9 一个机会，狠狠地点击吧 :D

IE7 这个版本极度提升了对 CSS 的支持，外加一个长久以来备受抱怨的透明 PNG 支持。除了没有 CSS generate content 以外，其实没有什么好抱怨的，抛弃 hacks 的时代真的来临了，条件注释的方式将是您最好的伙伴。实际上，一直以来，在我的项目中，我只有一个 ie6patch.css（我一直对这个命名引以为豪），是不是需要引入一个 ie7patch.css？在大部分情况下，已经没有必要的了，我前面说过，IE7 对 CSS 的改进是有目共睹的，但不可避免，作为 MS 的产品，没有缺陷是卖不出去的 XD。

自动清除浮动问题

一个自动清除浮动最安全的做法是使用 :after，而这正是 IE7 缺少的支持。在 IE6 中，们使用 height: 1% 来达到相同目的。解释一下这条 hack 的原理吧，height 的值可以是任意的，它只是用来触发 IE 特有的 `hasLayout`（没错，还是 old9 的）,而在 IE6 中，height 实际上等同于 min-height。遗憾的是，IE7 已经修正了 height 这个 bug。幸运的是，IE 的 hasLayout 还存在，我们也可以给高度通过指定一个数值来触发它。IE7 新支持的 min-height 可以帮忙。所以，在 IE7 中，这句可以帮您搞定自动清除浮动的问题：min-height: 1px;。（在我看来 1px 要比 1%安全，您随自己的喜好吧）。

如何做？

* html .wantoclear {
  height: 1%;
} /*ie6*/
* + html .wantoclear {
  min-height: 1px;
} /*ie7*/

这对于小型项目来说可以 quick and dirty，但是大型项目中，我个人的建议是，还是使用条件注释的方式吧，在 ie7patch.css 的中只需写 .wantoclear { min-height: 1px; }，更方便于维护。

另外，清除浮动的方式有多种，比如使用 overflow，但实践证明，只有上述方式是最安全的。其他方式可以酌情使用。参看：闭合浮动元素（还是 old9！）。总之，您现在看到您的项目页面不能正常显示，十有八九是它导致的，按照我的方法，Get ready for IE7 吧 :)

百分比宽度问题

这个问题让头痛，从 IE5 起，到 IE7，遗憾的是并没有修正。当您使用百分比作为宽度单位时，IE 的计算总是差那么几个像素。在一般应用中，这倒不会导致什么问题。但依靠浮动来布局的话，这确实致命的，因为稍微有 1 像素的差异，IE 不像 Firefox, Opera 还能让布局保持，它会将另外超出父元素的元素狠狠地甩到下一行中，导致布局的错落。举个简单的例子，假设我们有一堆的 li 元素，我们需要每行放置 4 个。用百分比的方式来做，则可以一句很简单的 li { float: left; width: 25%; } 搞定，且具有巨大的灵活性。但是 IE……wtf...有时候确实正常给你每行排列 4 个，有时候却只有 3 个。你看到比你预期的少一个，那就是它计算宽度的误差导致的。

解决方法其实很简单，把宽度减少 0.1% - 0.5%就可以了。就是说，你可以在 ie7patch.css 写上 li { float: left; width: 24.9%; }。

IE7 还存在这么多问题，而且不知道到 IE8 会不会修正，这就是为什么还需要使用条件注释的原因。

IE7 即将通过「高优先级更新」来入侵用户电脑，我们还是提前做好准备吧。

另外，目前的实践经验还不是很多，很多问题尚在发现中，这是一篇不断更新的 blog，欢迎大家补充，谢谢。

2006-11-16 更新：

根据 Three reasons sites break in Internet Explorer 7, 导致 IE7 出问题的三个可能理由是：

在 Doctype 之前使用了导致 IE6 使用 Quirks mode 的 XML 声明，IE7 已经修复这个问题，相同的 CSS 而不同的渲染模式，因此 IE7 可能会出问题。
网站构建基于大量的 hacks，而这些 hacks 在 IE7 中已经修复。
使用没有判断浏览器版本的条件注释来引入 CSS，导致 IE7 也引入了那些本不该是修复 IE7 的 CSS。

另外，推荐阅读 Internet Explorer 7: Were you ready?。

2006-11-23 更新：

推荐阅读：Wake up and smell the IE7!