max|min-width|height的兼容性测试及设置

<div class="sel">
<select onchange="selFloat(this.value,3)"><option value="1">取消对象浮动</option><option value="2">设置对象浮动</option></select>
<select onchange="selSize(this.value,3)"><option value="1">文字未超出范围</option><option value="2">文字已超出范围</option></select>
</div>
</body>
</html>

在XHTML页面中有3组这样的代码：“<div class="all"><div id="sub1">...</div></div>”、“<div class="all"><div id="sub2">...</div></div>”和“<div class="all"><div id="sub3">...</div></div>”。

All对象是父对象，.all {width:230px; height:60px; padding:10px 0 0 10px; overflow:hidden;}。SubX是子对象。

实例一：

Sub1设置了min-width:150px和min-height:30px两个属性。预期效果：当内容没超过范围时，对象的宽度应该是150px，高度应该是30px。我们看到高度正确，但宽度并不是预期的效果。这是因为块级对象没有设置浮动属性时，在FireFox下默认为：子对象的宽度将占满父对象剩下的宽度，而高度自适应。要使宽度也自适应，就要设置对象的浮动属性。

如本例中，出现四中情况：

1、当对象没有设置浮动，内容没有超出范围时：默认情况下高度自适应对象，为30px；而高度则占满父对象剩下的空间，即230px；

2、当对象没有设置浮动，内容超出了范围时：由于只是设置了最小范围而没有设置最大范围，则宽和高占满剩余父对象的空间，即宽230px，高度要看内容的多少而定；

3、当对象设置了浮动，内容没有超出范围时：由于设置了最小范围，此时自适应对象的设置，既宽150px，高30px；

4、当对象设置了浮动，内容超出了范围时：由于只是设置了最小范围而没有设置最大范围，则宽和高都随内容自适应。

实例二：

Sub2设置了max-width:220px; max-height:50px; overflow:auto;属性。预期效果：当内容超出了最大范围时，将按照设定的最大值使内容显示在固定的区域中，并根据overflow:auto（滚动条根据需要出现）的设置显示。

同样具有四种情况：

1、当对象没有设置浮动，内容没有超出范围时：原本应该同例1相同，占满剩余父对象的空间，但由于设置了最大宽度，所以根据最大宽度的值而定，即220px。高度自适应内容；

2、当对象没有设置浮动，内容超出了范围时：由于设置了最大的宽高，所以按照最大宽度和高度显示，即宽220px，高50px。并在显示不下的时候自动出现滚动条；

3、当对象设置了浮动，内容没有超出范围时：由于最大值只对内容超出范围是有效，而对象又没有设置最小值，所以宽和高都自适应内容显示；

4、当对象设置了浮动，内容超出了范围时：同第2种情况相同，宽220px，高50px。这没什么好说的，要说的是，左右滚动条也出现了。出现这种情况的原因是：由于对象设置了浮动，即大小自适应内容，而第2种情况是内容适应范围。这就是造成这种情况出现的原因。

实例三：

Sub3设置了max-width:220px; max-height:50px; min-width:150px; min-height:30px; overflow:auto;。预期效果：当内容没有超出范围时，按照最小设置的区域显示。当超过了范围时，按照最大设置的区域显示。即无论内容多少，如果没超过宽150px，高30px的区域，则按照宽150px，高30px的区域显示；同样，无论内容多少，如果超过了宽220px，高50px的区域，则按照宽220px，高50px显示。显示不下的内容则根据overflow的设置显示。

这同样会有四种情况出现：

1、当对象没有设置浮动，内容没有超出范围时：同实例一中第1种情况相同，不同的是宽是按照最大宽度设置而定的，即220px；

2、当对象没有设置浮动，内容超出了范围时：同实例二中第2种情况相同；

3、当对象设置了浮动，内容没有超出范围时：同实例一中第3种情况相同；

4、当对象设置了浮动，内容超出了范围时：同实例二中第4中情况相同。

实例三的关键在于如果不设置对象的浮动，也就不可能实现为超出最大范围时按照最小设置显示。如果设置了浮动，则在超出最大范围时会同时出现上下和左右两个滚动条（当然也可以使用嵌套层固定高度屏蔽下面左右滚动条的方法）。具体什么时候使用什么属性，还要看需求而定。但通过上面三个例子，我们可以知道在IE6下max / min-width / height属性是不被支持的。

（编辑：IT资讯之家 www.it55.com）