在用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 && d.documentElement.behaviorUrns)) ? true : false;
function bodySize(){
if(winIE && d.documentElement.clientWidth) {
sObj = d.getElementsByTagName("body")[0].style;
sObj.width = (d.documentElement.clientWidth<760) ? "760px" : "100%";
}
}
function init(){
if(winIE) { bodySize(); }
}
onload = init;
if(winIE) { onresize = bodySize; }
分兩種情況來講。
一、非常方便的解決方法。
我們要讓一個元素在窗口最大化時寬度為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 && d.documentElement.behaviorUrns)) ? true : false;
function bodySize(){
if(winIE && d.documentElement.clientWidth) {
sObj = d.getElementsByTagName("body")[0].style;
sObj.width = (d.documentElement.clientWidth<760) ? "760px" : "100%";
}
}
function init(){
if(winIE) { bodySize(); }
}
onload = init;
if(winIE) { onresize = bodySize; }
标签:
推薦設計
優秀海報設計精選集(8)海報設計2022-09-23
充滿自然光線!32平米精致裝修設計2022-08-14
親愛的圖書館 | VERSE雜誌版版式設計2022-07-11
生活,就該這麼愛!2022天海報設計2022-06-02
最新文章
最后加載廣告的JS代碼其他教程2012-05-23
網頁設計的標準尺寸其他教程2008-03-03
如何讓廣告代碼不影響網其他教程2007-12-11
網頁設計基礎:文字大小的其他教程2007-10-11