用css在IE6下实现最小宽度(min-width)

[作者:zbm2001z|来源:蓝色理想|时间:2008-06-13| 收藏投稿 ]【大中小】

首先我们知道这个效果应该是一个老话题了。
今天整理文件的时候，发现自己以前的一些布局的解决方法躺在文件夹里很长时间了，翻翻老底吧
需要说明的是有幸也见到过CSSPLAY的老工程师站长对这个效果的实现，而且肯定是很早就给出来了。

闲话少说，上源码：

触发并利用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">
<div class="ie6-in">
<div id="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; } #min-width{ min-width:900px; background:#ccc; line-height:200px; _zoom:1; } </style> </head> <body> <div class="ie6-out"> <div class="ie6-in"> <div id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div> </div> </div> <input name="" type="button" onclick="alert('容器宽度='+document.getElementById('min-width').clientWidth+'px'+'\n\n'+'视口宽度='+(document.documentElement.clientWidth||document.body.clientWidth)+'px');" value="查看宽度" /> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Tags：CSS IE6 min-width

顶一下

上一篇：带按钮控制的垂直滚动JS图片展示

下一篇：仿taobao商品查询展示效果