让IE6支持最小高度min-height、最大高度max-height的方法
![preview](https://dl-preview.csdnimg.cn/12885669/0001-5b7f111442eee2254ae8e23a1d6d8e40_thumbnail.jpeg)
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
在网页设计中,`min-height`(最小高度)和`max-height`(最大高度)是CSS3中非常实用的属性,它们允许元素根据内容自动调整大小,同时限制其高度的上下限。然而,这些属性在老旧的Internet Explorer 6(简称IE6)浏览器中并未得到原生支持,这给开发者带来了不小的困扰。本文将详细介绍如何让IE6支持`min-height`和`max-height`,以及如何同时兼容这两个属性。 1. **IE6支持`max-height`的解决方法** 在IE6中,我们不能直接使用`max-height`属性,因为它不被识别。一种常见的解决方案是利用IE6特有的下划线前缀`_height`配合`expression`属性来模拟`max-height`的效果。例如: ```css .yangshi { max-height: 1000px; _height: expression((document.documentElement.clientHeight || document.body.clientHeight) < 1000 ? "1000px" : ""); overflow: hidden; } ``` 这段代码中的`max-height: 1000px;`是针对非IE6浏览器的,而`_height: expression((document.documentElement.clientHeight || document.body.clientHeight) < 1000 ? "1000px" : "");`则是专为IE6定制的,它会根据浏览器窗口的高度判断是否设置高度为1000px。`overflow: hidden;`用于防止内容超出容器时显示滚动条。 2. **IE6支持`min-height`的解决方法** 同样地,IE6也不支持`min-height`属性。我们可以采用类似的方法来实现: ```css .yangshi { min-height: 1000px; _height: expression((document.documentElement.clientHeight || document.body.clientHeight) > 1000 ? "1000px" : ""); } ``` 在这个例子中,如果浏览器窗口的高度大于1000px,元素的高度将被设置为1000px,确保了最小高度。 3. **IE6同时支持`max-height`和`min-height`的方法** 要在IE6中同时支持`max-height`和`min-height`,可以结合上面两种方法,如下所示: ```css .yangshi { Max-Height: 620px; Min-Height: 40px; _height: expression(this.scrollHeight > 620 ? "620px" : (this.scrollHeight < 40 ? "40px" : "auto")); } ``` 在这段代码中,`Max-Height`和`Min-Height`是专门为IE6设定的,而`_height: expression(this.scrollHeight > 620 ? "620px" : (this.scrollHeight < 40 ? "40px" : "auto"));`通过`expression`动态计算元素的滚动高度,以确保在40px和620px之间。 需要注意的是,`expression`属性在现代浏览器中已经被废弃,因此这种技术只适用于还需要兼容IE6的场景。随着IE6的市场份额逐渐减少,开发者应尽可能转向更现代的解决方案,如使用`Flexbox`或`Grid`布局,它们提供了更强大、更灵活的布局控制,且在现代浏览器中得到了广泛支持。同时,使用条件注释或JavaScript库(如Modernizr)也可以帮助实现更好的浏览器兼容性。
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![thumb](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 3
- 资源: 952
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)