IE6的min-height/width

1、页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：

<body>

<div class="container“>

然后CSS这样设计：

#container

{

min-width: 600px;

width:expression(document.body.clientWidth < 600? "600px": "auto" );

}

2、IE6的min-height hack

注：min-height不支持IE6的，但这里有一个min-height hack。

.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}

css设置某个div最小height，然后再自适应height，这里有个不错的解决办法。

看代码先：

1
2
3

min-height:400px; //（解决ie8.9.ff.chrome）
*+height:100%;  //（解决ie7）
_height:400px; //（解决ie6） ie6超出自动溢出

代码都有注释，只为了大家能看的更清晰更明白，因为有写同学不太了解hack的处理方式。

下面是无注释版，复制就能用的：

1

min-height:400px;*+height:100%;_height:400px;

这种方式还是不错的，当然还有其它处理方法可以解决这样的小问题，有兴趣的同学可以深入研究下。不过浩子不想这么复杂，因为hack真的只是个小问题，前端开发更注重的应该是效率和交互，努力ing!!!!

感谢端友“renpengfeier”提供的方法，经测试可行：

 

min-height:400px; height:auto!important; height:400px;

IE6实现min-width

<style type="text/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>

posted @ 2011-10-19 14:32  鱼叉伍德  阅读(343)  评论(0)    收藏  举报