故障現(xiàn)象：

當(dāng)我們?cè)趯?xiě)代碼的時(shí)候如果，頁(yè)面頭部（#header ）樣式定義使用了100%寬度，那么當(dāng)我們把瀏覽器窗口縮小的時(shí)候就會(huì)發(fā)現(xiàn)有部分內(nèi)容被截?cái)嗷蝻@示不全；

原因分析：

當(dāng)窗口縮小時(shí)，瀏覽器默認(rèn)100%寬度為瀏覽器窗口的寬度。而忽略了下部?jī)?nèi)容層固定寬度(比如你設(shè)置的網(wǎng)頁(yè)整體寬度為960px)。從而出現(xiàn)了固定寬度大于100%寬度的現(xiàn)象。瀏覽以此理解來(lái)解析頁(yè)面，就出現(xiàn)了容器寬度理解上的差異，出現(xiàn)了一個(gè)非常奇特的BUG；

解決辦法：

只需要使用css的min-width:980px對(duì)width:100%的對(duì)象加以限制即可以解決；

擴(kuò)展延伸：

如果在做自適應(yīng)網(wǎng)頁(yè)或測(cè)試網(wǎng)頁(yè)在不同設(shè)備下的兼容性測(cè)試時(shí)候，比如 iPad 的 Safari 瀏覽器中背景顯示不全，等問(wèn)題，都可以嘗試定位到該 div 后，即很有可能發(fā)現(xiàn)是指定 css 的寬度為 100%導(dǎo)致問(wèn)題；safari 中 viewport 默認(rèn)寬度為 980px，若事先未指定其初始 viewport 寬度，則會(huì)默認(rèn)按照 980px 處理?？梢阅J(rèn)初始化viewport寬度或在 css 中設(shè)定 min-width即可解決；