作者：武利剑

标准参考

'min-width' 和 'max-width' 限定内容宽度的范围。定义值如下：

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

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

关于 'min-width' 和 'max-width' 的更多信息，请参考 CSS 2.1 10.4 Minimum and maximum widths: 'min-width' and 'max-width'。

这两个特性是有 CSS 2.0 规范提出的，在之前的 CSS 1 规范中并没有他们。

问题描述

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

造成的影响

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

受响的浏览器

IE6 IE7(Q) IE8(Q)

问题分析

分析以下代码：

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

在各浏览器中效果如下：

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

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

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

IE6 的开发时间早于 CSS 2.0 版本成文时间，这导致了 IE6 中不可能预知未来提前支持 'min-width' 'max-width' 等 CSS 2.0 后才有的规范内容，这个问题是典型的规范变迁以及浏览器开发时间不同步造成的历史遗留问题。

解决方案

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

参见

知识库

• ...

相关问题

• ...