打印

RD8015: IE6 IE7(Q) IE8(Q)不支持 'min-height' 和 'max-height' 特性

作者:武利剑

标准参考

'min-height' 和 'max-height' 限定内容高度的范围。定义值有如下定义:

  • <length>:指定一个固定的最小和最大的使用高度;
  • <percentage>:指定确定计算值的百分比。百分比的计算基于生成框的包含块的高度。如果包含块的高度是负值,计算值是0。
  • none:(仅用于 'max-width')对框的高度没有限制。

'min-height' 和 'max-height' 设定负值是不合法的。

关于 'min-height' 和 'max-height' 的更多相关信息,请参考 CSS 2.1 10.7 Minimum and maximum heights: 'min-height' and 'max-height'

问题描述

IE6 IE7(Q) IE8(Q) 不支持 'min-height' 和 'max-height' 特性。

造成的影响

在 IE6 IE7(Q) IE8(Q) 中使用 'min-height' 和 'max-height' 特性无效。

受响的浏览器

IE6 IE7(Q) IE8(Q)

问题分析

分析以下代码:

<style type="text/css">
#minHeight{
  min-height: 100px;
  width: 50px;
  height: 50px;
  background-color: gold;
  margin:10px;
}
#maxHeight{
  max-height: 50px;
  width: 100px;
  height: 100px;
  background-color: silver;
  margin:10px;
}
</style>
<div id="minHeight"></div>
<div id="maxHeight"></div>

在各浏览器中效果如下:

IE6 IE7(Q) IE8(Q) 其他浏览器

可见,IE6 IE7(Q) IE8(Q)下 DIV 的内容宽度是 'height' 的值,而不是 'min-height' 和 'max-height' 的值。

其他浏览器,当 'height' 的值小于 'min-height' 值时,实际值是 'min-height' 值,当 'height' 的值大于 'max-height' 值时,实际值是 'max-height' 值。

解决方案

使用 Javascript 实现 'min-height' 和 'max-height' 特性功能。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6
Chrome 4.0.302.3 dev
Safari 4.0.4
Opera 10.60
测试页面: RD8015.html
本文更新时间: 2010-07-20

关键字

min-height max-height