交互设计中心-72色

交互设计中心 | 用户体验 | 优化

兼容的最小高度适应不定量内容的容器

2008年5月23日 | 分类:DIV+CSS | 评论:0 | 引用:0 | 浏览: | Tags:css  div  IE与Firefox兼容  

经常遇到这样的问题,左右结构的网页上,两边的背景不同,而为主的大容器因为需求需要在内容过少时与小容器的高度一致。这样就造成了各浏览器的兼容问题:如果设定主容器的高度,在IE7和FF下会显示成如下图:

clip_image002

如果单独使用min-height,在IE7和FF下可以实现想要的效果,但IE6下没有这个属性,不起作用,和没有设定高度的效果是一样。IE6效果如下图:

clip_image004

既然如此,不要忘记还有一个重要的可以区分IE6和IE7的!important,于是有了下面的想法:

height:600px;height:auto !important; min-height:600px;

这样得到的效果在IE6,IE7,FF下均如下图:

内容过少时:

clip_image006

内容过多时:

clip_image008 

转自:空格

Share
« 去掉table的border默认属性的3维效果网页设计中的版式原理--力场 »



◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。