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出问题的三个可能理由是:

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

2006-11-23更新:

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