声明: 黑色部分并不是本人写的,我只是解析。
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写法:
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}
对于!important和它的用法你肯定不陌生。
!important是CSS2提出的,是提升指定样式规则的应用优先权。你可能看到或听说IE6不支持!important,可以用此方法来区分 IE6和其他标准浏览器。但我要说的是:IE6支持!important属性,但存在bug。有什么bug呢?实验是最有力的证据,我们就来做实验证实一 下。
我们拿以下XHTML代码并用color属性来做实验:
给它加上颜色
color:#f00;
}
结果正是我们设置的那样。
设置如下属性:
color:#f00 !important;//红色
color:#00f;//蓝色
}
没错,正如你所知道的,这时IE6显示蓝色,而IE7和FF显示红色。
换个写法:
color:#f00 !important;
}
h2{
color:#00f;
}
这时你认为会是什么结果呢?是否仍认为在IE6里是蓝色呢?那你错了,这时IE6、IE7和FF都显示红色。
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}的理解