縮小窗口時CSS背景圖出現右側空白BUG的解決方法

頁面容器（#wrap）與頁面頭部（#header ）為100%寬度。而內容的容器（#page）為固定寬度960px。瀏覽窗口縮小而小於內容層寬度時會產生寬度理解上的差異。如下圖所示窗口寬度大於內容層寬度：

改變瀏覽器窗口的大小，小於內容層寬度，如下圖所示。

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

問題的根本在於：當窗口縮小時，瀏覽器默認100%寬度為瀏覽器窗口的寬度。而忽略了下部內容層固定寬度(960px)。從而出現了固定寬度大於100%寬度的現象。瀏覽以此理解來解析頁面，就出現了容器寬度理解上的差異，出現了一個非常奇特的BUG。如圖所示。

我們分析，問題的解決之道：既然是寬度理解上的差異，只需要告知瀏覽器頁面容器的寬度，頭部元素的寬度不能小於內容層的寬度即可。當瀏覽器窗口縮小時，保持頁面容器和頭部元素的最小寬度為內容層的寬度。這樣就解決了寬度上出現問題。

css代碼為：

#wrap {
    width:100%;
    background:#ddd;
    width:expression(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代碼為：

<div id="wrap">
    <div id="header"></div>
    <div id="page"></div>
</div>