|
给大家说说兼容多浏览器的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的相关文章。 (责任编辑：admin) |