兼容多浏览器的Div高度自动伸展的效果


给大家说说兼容多浏览器的Div高度自动伸展的效果。普通的Div都可以自动延伸,但让Div有一个固定高度,在内容增多时自动伸展,并且兼容多浏览器该怎么做呢?

很简单,代码如下:
?

.div { width:200px; height:200px; height:auto; min-height:200px; }

这段CSS代码是利用CSS书写顺序和浏览器的特殊兼容性改变其对CSS的解析做到的,它可以在IE6、IE7、Firefox等浏览器中正常显示。下面来解释一下:

height:200px定义了div的高度为200像素,这句代码对所有浏览器有效。但div的内容超过200像素时,IE6浏览器中的容器会自动伸展,IE7、Firefox等现代浏览器则不会向下伸展,内容溢出容器。如上图中溢出状态图示。

height:auto对IE6浏览器不起作用,但对IE7、Firefox等浏览器起作用,可以修复溢出效果,但到这一步由于auto起到了作用,在IE7和Firefox中Div又没有了高度,所以在后面还要加一句min-height:200px来让这个div的最小高度为200像素。

这种方法看似没有用到CSS hack,但其实这也算是CSS hack的一种,因为它是利用CSS书写顺序达到的效果。有兴趣的朋友可以看前面CSS hack的相关文章


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3