解决在IE6中最大宽度和最小宽度的兼容问题

22次阅读

在制作网页中,我们经常会碰到 min/max-width,min/max-height 在 IE6 底下是无效的,这也是 web 设计师最头疼的问题之一,以下的方法可以解决这些难题,并且比较简约。
<div style="max-width:250px;"> 这段文字内容,max /min 在 ie7 + 和 firfox,safari,opera 浏览器下均支持,最宽值为 250px</div> 不过 IE6 无法认读这个属性,还好 IE 它支持自己 javascript 的属性表达, 例如:
 div{width:expression_r_r(250+"px")}  和   div{widt:250px}在 IE 的认读中都是一致的!但如果有的用户在浏览器中禁用 javascript,这个写法就失败了。所以,需要换一种方法:
 #mycss {
width:100%; 
 max-width:500px;
 width:expression_r_r(document.body.clientWidth > 500? "500px": "auto"); }
  或是:
 #mycss {
 max-width: 33em;
 width: expression_r_r(document.body.clientWidth > (500/12) *parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );

我们设置了容器 mycss 的宽度为:width:100%; 其实这是一句废话,因为 DIV 是块元素,默认的宽度就是父级元素的宽度。此例中 div 宽度,若不进行声明则等同于 body 的宽度。
  我们设置容器的 max-width 为 500px。这对于 FF 来说是有效的。而对于 IE 则 没有作用。
面对没有效果的 IE,我们应用 expression_r_r 嵌入脚本,声明了当宽度大于 500px 的时候,宽度就等于 500px。
 parseInt(document.body.currentStyle.fontSize)?"33em":"auto" 如果这个实际宽度大于 (500/12)当前字体的尺寸,则设置页面的宽度为 33em。
  同样,对于最小的宽度,和 ax/min-hight,也是一样的:
  最小:
 #mycss {
 min-width: 333px;
  width: expression_r_r(document.body.clientWidth < 334 ? "333px" : "auto");
 }
  最大高度:
#mycss {
max-height: 333px;
 height: expression_r_r(this.scrollHeight > 332 ? "333px" : "auto")
}
  最小高度:
#mycss {
  min-height: 333px;
 height: expression_r_r(this.scrollHeight < 334 ? "333px" : "auto");
}
另外还有一种简单的方法:
#a {height:auto !important; min-height:400px;}
这个样式可以在 IE5.5,IE6,IE7 以及 FF,Safari 等浏览器下的解决最小高 度问题,最大高度就没有实践过了

正文完