：牛魔王的世界观 »谈谈ie6不支持min-height与max-height的解决方法

转载网址：http://www.niumowang.org/html-css/ie6-min-height/

手里的项目还在继续，今天正好遇到了min-height的问题，干脆在这里记录下来。我是喜欢联想的人，所以在这里又倒腾出了ie6支持max-height，以及ie6同时支持min-height与max-height的方法。（注：本文主要介绍css写法，其他的用js或者jquery的方法就很多了）

如何让ie6支持min-height

如果只是让ie6支持min-height倒也比较简单。一些朋友看过代码就能明白，主要是css hack方法，利用ie6支持或者不支持的符号来完成任务。

方法一：

<style type="text/css">
.show{background:#ccc;min-height:100px;_height:100px;}
</style>
<div class="show">牛魔王的世界观测试御用文字！</div>

方法二：

<style type="text/css">
.show{background:#ccc;height:auto!important;height:100px;min-height:100px; }
</style>
<div>牛魔王的世界观测试御用文字！</div>

方法三：（不推荐）

<style type="text/css">
.show{background:#ccc;min-height:100px;_height:expression(this.scrollHeight < 100 ? "100px" : "auto");}
</style>
<div>牛魔王的世界观测试御用文字！</div>

上面前两种方法原理都是一样的，让div块在ie6下高度固定为100px。第三种方法利用到了ie6的expression行为（主要是将css与js表达式结合起来），我是极力不推荐这种写法，expression会占用大量浏览器资源。我也曾经遇到过使用了expression导致页面很卡的现象。

如何让ie6支持max-height

一般max-height在实际应用中用到的比较少。在实战方面主要结合overflow来使用。如果让ie6支持max-height的方法同上面原理相同，加“_height:高度;”。由于浏览器会自动把超出部分的内容显示出来，所以这里如果想要达到超出部分隐藏的话可以加上“overflow:hidden;”，或者超出部分显示滚动条“overflow:auto;”

如果让ie6同时实现min-height与max-height

让ie6既支持min-height又实现max-height怎么办呢，你可能会说总不能写两个“height”吧。呵呵，是的即使写两个height浏览器也只会解析一个。
下面我结合一个案例来说明这个问题：
要求：用div+css实现，div容器内有多行内容，现在要求实现当高度小于100px的时候该容器最小高度为100px，当大于200px的时候显示下拉条。
看到这个要求有些朋友不免头大，这个东西怎么不太好实现吧。你可能会想到我前面说过的expression，在css里面计算该容器的高度。

是的，这样能够达到我们的要求。代码部分如下

overflow:auto;/*超出部分显示滚动条*/
_height: expression(
this.scrollHeight < 100 ? "100px" :
(this.scrollHeight > 200 ? "200px" : "auto");

不过按照惯例这不是高潮，呵呵，因为我上面已经说过我是极力不推崇这种方式的。既然刚才不是高潮那么我肯定会有自己的主张。具体怎么办呢？

可能是我上面说的有些误导了大家的思维，其实实现这种方式的写法比较是比较简单的。我们不一定非要采用max-height这个css样式来完成啊。我上面说的只是ie6实现它。废话不多说，看代码

<style type="text/css">
.contain{height:200px;overflow:auto;background:#eee;}
.post{_height:100px;min-height:100px;background:#ccc;}
</style>
<div class="contain">
<div class="post">
牛魔王的世界观御用测试文字！<br/>牛魔王的世界观御用测试文字！<br/>牛魔王的世界观御用测试文字！<br/>牛魔王的世界观御用测试文字！<br/>牛魔王的世界观御用测试文字！<br/>牛魔王的世界观御用测试文字！<br/>牛魔王的世界观御用测试文字！<br/>牛魔王的世界观御用测试文字！<br/>牛魔王的世界观御用测试文字！<br/>牛魔王的世界观御用测试文字！<br/>
</div>
</div>

呵呵，看到这里是否有种顿悟或者被骗的感觉呢？方法其实很简单就是添加了一个外容器，根本没有用到max-height属性。ok，说完了。不多说，主要是告诫自己以及从事此行的朋友，实现一个效果方法有很多种，很多的思路。有时候换一个角度，你会发现更精彩的部分。