IE6实现min-width（js）

来源：互联网发布：二维数组打印杨辉三角编辑：程序博客网时间：2024/05/23 00:54

触发并利用IE6-layout的怪异特性，css实现：

.ie6-out{
      _margin-left:900px;
      _zoom:1;
}
.ie6-in{
      _position:relative;
      _float:left;
      _margin-left:-900px;
}
#min-width{
      min-width:900px;
      background:#ccc;
      line-height:200px;
      _zoom:1;
}
</style>

<div class="ie6-out">
<divclass="ie6-in">
<divid="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>
</div>
</div>

扩展演示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>CSS实现最小宽度</title>
<style type="text/css">
body{ text-align:center;}
.ie6-out{
_margin-left:900px;
_zoom:1;
}
.ie6-in{
_position:relative;
_float:left;
_margin-left:-900px;
background:#f00;
line-height:200px;
}
#min-width{
min-width:900px;
background:#ccc;
_zoom:1;
}
</style>
</head>
<body>
<div class="ie6-out">
<divclass="ie6-in">
aa
</div>
</div>
<div class="ie6-out">
<divclass="ie6-in">
aa<divid="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>
</div>
</div>
<input name="" type="button"onclick="alert('容器宽度='+document.getElementByIdx('min-width').clientWidth+'px'+'\n\n'+'视口宽度='+(document.documentElement.clientWidth||document.body.clientWidth)+'px');"value="查看宽度" />
</body>
</html>

CSS Expression
——相信许多人在用这个方法实现容器最小宽度时都时常会被莫名其妙的死机所困扰，最后往往无果而终。

这里特别需要指出的是两点：
1.IE6-的标准模式下和quirk模式下代表视口的元素是不一样的，前者为<html>，后者则为<body>；
2.IE6-在以上两种不同的模式下，其对包含内容溢出时的不同表现形式，从而导致了赋值判断上的死循环。解释起来有些啰嗦，自己实践一下吧。

CSSExpression实现最小宽度源码：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 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>CSSExpression实现最小宽度</title>
<style type="text/css">
body{ text-align:center;}
#min-width{
min-width:900px;
_width:expression_r((document.documentElement.clientWidth||document.body.clientWidth)<900?"900px":"");
line-height:200px;
background:#ccc;
_zoom:
}
</style>
</head>
<body>
<divid="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>
<input name="" type="button"onClick="alert('容器宽度='+document.getElementByIdx('min-width').clientWidth+'px'+'\n\n'+'视口宽度='+(document.documentElement.clientWidth||document.body.clientWidth)+'px');"value="查看宽度" />
</body>
</html>

以上两种解决方法在IE6-的标准模式下和quirk模式下都可实现，IEExpression在这个应用中也未发现CPU效率问题。

来源：http://www.blueidea.com/tech/web/2008/5869.asp

注：用css中的zoom属性可以让网页实现IE7中的放大缩小功能。

比如你想让你的网页缩小为原来的一半，那么就在body中加入style="zoom:0.5"，如：

程序代码
<bodystyle="zoom:0.5">

0 0