作者：武利剑

标准参考

'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' 特性功能。

参见

知识库

• ...

相关问题

• ...