关于min-height的IE6及以下浏览器的Hack
咱现在这也是现学现卖,这个blog主题折腾了一整天了,总算差不多了。
刚刚还有一个问题,因为现在站内都没什么内容,所以列表页非常的短,以至于上层大小不足以覆盖住下层,搞得加在下层的不想漏出来的背景图片都看到了,感觉非常不好。下面简写代码示意一下:
#container{
height:500px;
background:#00F;
}
#page{
min-height:500px;
background:#F00;
}
<div id="container">
<div id="page"></div>
</div>
page层内容少,页面很矮,加了min-height后FF与IE7.0中page层可以覆盖住container的背景色。而IE6及以下min-height无法辨认,所以露出了我不想让他露出来的container层的红色背景。
最简单的办法还是hack吧。
#page{
background:#F00;
min-height:500px;
height:auto !important;
height:500px;
}
这样IE6中page的确有了最小高度,能覆盖住container,但是其实也只有500px这么一个高度,等到内容多了这个page也不会自动拉长了,这样不行,折腾多时,终于找到个方法可以解决IE又有最小高度又能自动拉伸的目标:
#page{
background:#F00;
min-height:500px;
height:auto !important;
height:500px;
overflow:visible;
}
嗯,就是这句overflow:visible使IE们能够当作height:auto来处理。问题解决。
今天在Eric Mayer的站里看到了一个新的关于min-height或者min-width的hack, 代码如下:
#page
{
height: 350px;
}
html>container #page
{
height: auto;
min-height: 350px;
}
我的翻译: 所有的浏览器都能完整的看完第一个css规则, 但是IE们无法完整读取第二个css 规则,因为它使用了子选择器命令(">")。IE们会用第一个css规则中的值覆盖第二个中的值,因为这个css规则更独特一些,更独特的css 规则总是覆盖较不独特的规则。
看了半天,我觉得这段字不太懂,可能个人英文不好的缘故吧。原文摘抄如下:
All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command3. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.