点击这里给我发消息 点击这里给我发消息

IE中显示min-width效果的解决方案

添加时间:2010-1-5
    相关阅读: 解决方案 方案 页面 google

在用css布局中,时常用到min-width这个参数,而IE对此无法识别,那么,如何使IE也能显示同样的效果呢?这几天,菜鸟老乌鸦正碰到了这个麻烦事儿,于是google了一大堆资料,找到了个感觉比较简单的方法,总结一下写在这里,与鸟们分享。如有错误、疏漏之处,还请不吝赐教。
分两种情况来讲。

一、非常方便的解决方法。
我们要让一个元素在窗口最大化时宽度为100%,当缩小窗口时,要求页面最小宽度为760px,在css中,一般我们会这样写:
CODE#content {
width:100%;
min-width: 760px;
}

非常好,在opera、firefox下显示很正常。但在IE下没有效果。解决方法只要在后面加一句就行了,如下:
CODE#content {
width:100%;
min-width: 760px;
width: expression(document.body.clientWidth < 760? "760px": "100%" );
}

二、应用于body
上面的解决方法并不能应用于body元素,当我们需要对body也进行此设置时,用js来解决是比较好的。为了可爱的firofox、opera等,css里这一句还是要写上的:
CODEbody {
margin: 0;
padding: 0;
width:100%
min-width: 760px;
}

然后在页面中再调用一个js,代码如下:
CODEvar d = document;
var winIE = (navigator.userAgent.indexOf("Opera")==-1 && (d.getElementById && &nbsp;d.documentElement.behaviorUrns)) &nbsp;? true : false;
function bodySize(){
if(winIE && d.documentElement.clientWidth) {
&nbsp;sObj = d.getElementsByTagName("body")[0].style;
&nbsp;sObj.width = (d.documentElement.clientWidth<760) ? "760px" : "100%";
}
}
function init(){
if(winIE) { bodySize(); }
}
onload = init;
if(winIE) { onresize = bodySize; }

本文作者:
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册