min-height最小高度的实现（兼容IE6、IE7、FF）

声明： 黑色部分并不是本人写的，我只是解析。

 

CSS的兼容性问题一直令人头疼，最小高度min-height是一个非常有用的属性，在页面布局中的很多地方可以用到。在52CSS.com的 一些实例布局中也有涉及。

　　当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候， 容器能够自动的伸展以适应内容的变化。

　　min-height 属性并非所有浏览器都兼容，主要问题还是出现在IE6，这个不支持标准的浏览器偏偏占据很大的用户群体，虽然IE7发布很久了，IE8正式版也快发布了， 但IE6依然有着众多的用户。实在让CSSer非常无奈。

　　关于可以min-height属性参考这里：http://www.52css.com/css/c_minheight.html

　 　E6对于overflow的特殊实现，给我们实现min-height提供了一个思路，所以产生了以下兼容IE6、IE7、FF浏览器的min- height写法：

[www.52css.com]

#mrjin {
    background:#ccc;
    min-height:100px; 
    height:auto !important; 
    height:100px; 
    overflow:visible;
}

原创的地址：http://www.52css.com/article.asp?id=804&page=1#comm_top

在解析之前我们先来说明 IE6 ！IMPORTANT BUG

对于!important和它的用法你肯定不陌生。

!important是CSS2提出的，是提升指定样式规则的应用优先权。你可能看到或听说IE6不支持!important，可以用此方法来区分 IE6和其他标准浏览器。但我要说的是：IE6支持!important属性，但存在bug。有什么bug呢？实验是最有力的证据，我们就来做实验证实一 下。

我们拿以下XHTML代码并用color属性来做实验：

<h2>文字文字</h2>

给它加上颜色

h2{
color:#f00;
}

结果正是我们设置的那样。

设置如下属性：

h2{
color:#f00 !important;//红色
color:#00f;//蓝色
}

没错，正如你所知道的，这时IE6显示蓝色，而IE7和FF显示红色。

换个写法:

h2{
color:#f00 !important;
}
h2{
color:#00f;
}

这时你认为会是什么结果呢？是否仍认为在IE6里是蓝色呢？那你错了，这时IE6、IE7和FF都显示红色。

由此，我们可以得出：在IE6里，重复的属性写在同一对大括号里，后面的将会覆盖前面的，不管上面的属性是否加有!important声明；而写在 不同的大括号

对于#mrjin {
    background:#ccc;
    min-height:100px; 
    height:auto !important; 
    height:100px; 
    overflow:visible;
}的理解

对于FF,IE7等， 他们的高度是随机变化的，但是min-height有定义了最小高度。但是对于IE6，他的高度本身就是100.其实他是用了IE6对important属性的bug，这样的方法是很好的