dashan 提交于
论坛:
代码如下:
.div { width:300px; height:300px; height:auto; min-height:300px; }
这段CSS代码是利用CSS书写顺序和浏览器的特殊兼容性改变其对CSS的解析做到的,它可以在IE6、IE7、IE8、IE9、Chrome、FF等浏览器中正常显示。
下面来解释一下:
【height:300px】定义了div的高度为300像素,这句代码对所有浏览器有效。但div的内容超过300像素时,IE6浏览器中的容器会自动伸展,IE7、IE8、IE9、Chrome、FF等现代浏览器则不会向下伸展,内容溢出容器。
【height:auto】对IE6浏览器不起作用,但对IE7、IE8、IE9、Chrome、FF等浏览器起作用,可以修复溢出效果。
但到这一步由于auto起到了作用,在IE7、IE8、IE9、Chrome、FF中Div又没有了高度,所以在后面还要加一句【min-height:300px】来让这个div的最小高度为300像素。
这种方法看似没有用到CSS hack,但其实这也算是CSS hack的一种,因为它是利用CSS书写顺序达到的效果
- 登录以发表评论