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

改變?yōu)g覽器窗口的大小，小于內(nèi)容層寬度，如下圖所示。

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

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

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

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>

總結(jié)

以上是生活随笔為你收集整理的缩小窗口时CSS背景图出现右侧空白BUG的解决方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。