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

返回首页
创建时间：一月 10th, 2008 Traffic(563)

昨天在“CSS森林”技术交流群中与朋友们讨论了对象的最大和最小宽高（即max/min-width/height）在各浏览器下兼容的问题。在讨论到此属性是否适用于IE6下的时候持有分歧。下面我举3个例子来说明一下问题。

一、max / min-width / height属性在IE6下无效

目前，这也是我多年工作以来遇到的第一个，在其他浏览器下有效而IE6下无效，并且没有其他属性可以弥补此功能的问题。在以往的工作中体会到，微软总是在做兼容的同时又不失时机的开发出只有IE才可以支持的属性。而相对于max/min-width/height这样方便的属性而言，使我很不理解的是，微软为什么对此弃而不用。

以下我要举三个例子来说明一下这些属性的用法。建议有FireFox的朋友打开FireFox浏览器查看，因为IE6下什么效果也没有。

二、max / min-width / height属性的用法

下面请先看3个实例，后面将分别对每个实例做分析：

在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属性是不被支持的。

Posted by: 郁闷
相关话题：
  • 暂无相关话题

Comments(0)

暂无留言。
User Name:
（必添）
User Email:
（必添）
User URL:
Comment:
（必添）