关于min-height的IE6及以下浏览器的Hack[整理]

0
1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="css/text">
#container{
height:500px;
background:#00F;
}
#page{
min-height:500px;
background:#F00;
}
</style>
<div id="container">
<div id="page"></div>
</div>

page层内容少,页面很矮,加了min-height后FF与IE7.0中page层可以覆盖住container的背景色。而IE6及以下min-height无法辨认,所以露出了我不想让他露出来的container层的红色背景。

最简单的办法还是hack:

1
2
3
4
5
6
#page{
background:#F00;
min-height:500px;
height:auto !important;
height:500px;
}

这样IE6中page的确有了最小高度,能覆盖住container,但是其实也只有500px这么一个高度,等到内容多了这个page也不会自动拉长了,这样不行,折腾多时,终于找到个方法可以解决IE又有最小高度又能自动拉伸的目标:

1
2
3
4
5
6
7
#page{
background:#F00;
min-height:500px;
height:auto !important;
height:500px;
overflow:visible;
}

就是这句overflow:visible使IE们能够当作height:auto来处理。

发表评论

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 必填字段 *

为何看不到我发布的评论?

正在提交, 请稍候...