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

[ 来源:近水社区 | 作者: | 时间:2008-01-11 | 收藏 | 推荐 ] 【大中小】

昨天在“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个实例，后面将分别对每个实例做分析：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>最大、最小宽高设置</title>
<script type="text/javascript" language="javascript">
function selFloat(val,id) {var browser = navigator.appName;if (browser == "Microsoft Internet Explorer") {var str = 0;}else if (browser == "Netscape") {var str = 1;}switch(val) {case "1":if (str) {document.getElementById("sub" + id).style.cssFloat="none";}else {document.getElementById("sub" + id).style.styleFloat="none";}break;case "2":if (str) {document.getElementById("sub" + id).style.cssFloat="left";}else {document.getElementById("sub" + id).style.styleFloat="left";}break;}}
function selSize(val,id) {switch(id) {case 1:n = "最小宽150px，最小高30px";a = "最小宽150px，最小高30px。设置对象的浮动属性后，最小宽度设置才会生效。而无论是否设置了对象的浮动属性，最小高度都会生效。";break;case 2:n = "最大宽220px，最大高50px";a = "最大宽220px，最大高50px。由于没有设置最小值，不用留空间，所以也没有必要设置对象的浮动属性。设置浮动属性反而会出现问题。";break;case 3:n = "二者兼具。";a = "二者兼具。当内容没有超出范围时，保留预设空间。当内容超出范围时，在最大值的范围内显示。而问题就是具有左右滚动条。";break;}switch(val) {case "1":document.getElementById("sub" + id).innerHTML = n;break;case "2":document.getElementById("sub" + id).innerHTML = a;break;}}
</script>
<style type="text/css">
.all {
margin-top:5px;
width:230px;
height:60px;
padding:10px 0 0 10px;
font-size:12px;
color:#FFF;
background-color:#CCC;
overflow:hidden;
}
#sub1 {
min-width:150px;
min-height:30px;
overflow:auto;
background-color:#F90;
}
#sub2 {
max-width:220px;
max-height:50px;
overflow:auto;
background-color:#F90;
}
#sub3 {
max-width:220px;
max-height:50px;
min-width:150px;
min-height:30px;
overflow:auto;
background-color:#F90;
}
.sel {
margin-top:5px;
}
select {
width:116px;
}
</style>
</head>

<body>
<div class="all">
<div id="sub1">
  最小宽150px，最小高30px
</div>
</div>
<div class="sel">
<select onchange="selFloat(this.value,1)"><option value="1">取消对象浮动</option><option value="2">设置对象浮动</option></select>
<select onchange="selSize(this.value,1)"><option value="1">文字未超出范围</option><option value="2">文字已超出范围</option></select>
</div>
<div class="all">
<div id="sub2">
  最大宽220px，最大高50px
</div>
</div>
<div class="sel">
<select onchange="selFloat(this.value,2)"><option value="1">取消对象浮动</option><option value="2">设置对象浮动</option></select>
<select onchange="selSize(this.value,2)"><option value="1">文字未超出范围</option><option value="2">文字已超出范围</option></select>
</div>
<div class="all">
<div id="sub3">
  二者兼具。
</div>
</div>