故障現象：

當我(wǒ)們在寫代碼的時候如果，頁面頭部（#header ）樣式定義使用了100%寬度，那麽當我(wǒ)們把浏覽器窗口縮小(xiǎo)的時候就會發現有部分(fēn)内容被截斷或顯示不全；

原因分(fēn)析：

當窗口縮小(xiǎo)時，浏覽器默認100%寬度爲浏覽器窗口的寬度。而忽略了下(xià)部内容層固定寬度(比如你設置的網頁整體(tǐ)寬度爲960px)。從而出現了固定寬度大(dà)于100%寬度的現象。浏覽以此理解來解析頁面，就出現了容器寬度理解上的差異，出現了一(yī)個非常奇特的BUG；

解決辦法：

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

擴展延伸：

如果在做自适應網頁或測試網頁在不同設備下(xià)的兼容性測試時候，比如 iPad 的 Safari 浏覽器中(zhōng)背景顯示不全，等問題，都可以嘗試定位到該 div 後，即很有可能發現是指定 css 的寬度爲 100%導緻問題；safari 中(zhōng) viewport 默認寬度爲 980px，若事先未指定其初始 viewport 寬度，則會默認按照 980px 處理。可以默認初始化viewport寬度或在 css 中(zhōng)設定 min-width即可解決；