最小高度min-height的浏览器兼容方法

我们知道标准浏览器是支持min-height这个CSS属性的,但是在IE6中却不被认可。在我上次做主题的时候刚好遇见这个问题,今天就来讨论一下。看下图(右),要求是这样的:

min-height-study

innerBox(高度自适应)里面有两个浮动div元素(what and why),”why盒子”高度固定内容固定,”what盒子”内容不固定,想要解决”what盒子”必须延深与innerBox一致的问题,看到这里大多数人会想起自己博客的布局了吧,呵呵,这个技巧可是很常用的哦。显然解决这个问题的最好方法就是实现最小高度(min-height)。

最重要的一点是 : what内容高度小于why时如何让它在IE6中模仿min-height的效果。

而需要我们了解的一点是 : IE6中元素的height,width会随着它里面内容的增加面自动扩大

当我们在what中加入一条CSS规则 使它的高度和why一致就可以搞定IE6了,内容过多它会处适应而不是溢出,但是当内容增加时在FireFox标准浏览器里面会出现上图(左)所示FF中的溢出情况。

我们给what盒子加上min-height让它的最小高度和why一样,这时就好了。不过这时候我们应该把刚才为了搞定IE6加上的height值做成hack让它只在IE6中起作用,方法很简单在height属性值前加上下划线”_” OK搞定。

代码与效果预览

最小高度min-height的浏览器兼容方法》上有 12 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。