面向IE7 IE8 HTML 高度自适应解决方案。

Hardy — Wed, 09 Sep 2009 08:57:27 +0000

我的客户问我为什么他的网页现在好多内容都缩在一起了。后来了解到是因为他使用了IE8浏览器。这个问题在当时出IE7的时候就已经有了。只是我当时根据后台访问统计来看，使用IE7的人数比例不到2%，我就一直没解决这个问题。现在，看来这个问题越来越严重了。

其实解决这个问题并不复杂。

IE7、IE8对于某一个容器，如DIV，的高度显示判定是遵循以下逻辑：1.如果该容器没有高度设定，则该容器的实际高度取决于容器中的所有内容高度之和。2.如果该容器设定了高度，那么该容器的高度严格为设定高度，如果内容的高度之和超出此高度，那么这些内容将会溢出（看起来像缩在一起）。

而IE6在第2点里有所出入，就是：如果该容器设定了高度，如果子内容高度之和未超过设定高度，那么就以此高度为容器显示高度，如果高度之和超过子内容高度之和，那么就以子内容高度之和作为容器的显示高度（容器被撑大了）。

也就是说，在IE7、IE8中，只有不设定高度的容器才可以被撑大。而在IE6中，不管是否设定高度都会被撑大。

而对于网页中出问题的部分，就是文章内容容器。这个容器中的内容是不确定高度的（文章长短不能确定）。

我觉得，IE7、IE8对某些语法规则开始严格要求是个好事，这样的逻辑规则更加明晰。可以帮助我们构建更整齐规范的网页。我们积极去面对吧。

Hardy.九日志 » IE7