天天看點

width:100%縮小視窗時背景圖檔出現空白bug

頁面容器(#wrap)與頁面頭部(#header )為100%寬度。而内容的容器(#page)為固定寬度960px。浏覽視窗縮小而小于内容層寬度時會産生寬度了解上的差異。如下圖所示視窗寬度大于内容層寬度:

width:100%縮小視窗時背景圖檔出現空白bug

改變浏覽器視窗的大小,小于内容層寬度,如下圖所示。

width:100%縮小視窗時背景圖檔出現空白bug

拖動水準滾動條,出現了bug的樣子。右邊的背景不存在了。如下圖所示。

width:100%縮小視窗時背景圖檔出現空白bug

問題的根本在于:當視窗縮小時,浏覽器預設100%寬度為浏覽器視窗的寬度。而忽略了下部内容層固定寬度(960px)。進而出現了固定寬度大于100%寬度的現象。浏覽以此了解來解析頁面,就出現了容器寬度了解上的差異,出現了一個非常奇特的BUG。如圖所示。

width:100%縮小視窗時背景圖檔出現空白bug

我們分析,問題的解決之道:既然是寬度了解上的差異,隻需要告知浏覽器頁面容器的寬度,頭部元素的寬度不能小于内容層的寬度即可。當浏覽器視窗縮小時,保持頁面容器和頭部元素的最小寬度為内容層的寬度。這樣就解決了寬度上出現問題。

css代碼為:

#wrap {

    width:100%;

    background:#ddd;

    width:expression_r(document.body.clientWidth <= 960? "960px": "auto");

    min-width:960px;

}

#header {

    width:100%;

    height:78px;

    border-bottom:1px solid #f60;

    background:#f0f0f0 url(head_tbg.jpg) repeat-x;

}

#page {

    width:960px;

    height:100px;

    margin:5px auto;

    background:#fff;

    border:1px solid #00CCCC;

}

html代碼為:

width:100%縮小視窗時背景圖檔出現空白bug