一、bug描述
下圖為正常情況，一個網頁主體寬度為1280px。
當縮小浏覽器寬度，出現滾動條時，效果如下，右側出現空白，導緻内容顯示不全。
二、bug重制和解決
1、代碼如下
body中有一個灰色背景的div，div中嵌套一個有固定寬度1280px的p标簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="background: #eee;">
測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字
<p style="background-color: red;width: 1280px;">1280px寬的的p标簽</p>
測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字
</div>
</body>
</html> 正常顯示
縮放浏覽器出現滾動條時，
2、問題分析
div預設的寬度是100%，這樣可以自适應。body的寬度也是100%，以html标簽寬度為參考，而html寬度随着浏覽器縮放增大或減小。
上面浏覽器顯示不全的原因是，當浏覽器寬度變小出現滾動條時，div寬度仍然根據浏覽器寬度自适應，而p标簽寬度固定而且超出浏覽器寬度，是以出現空白。
3、解決方法
設定body的最小寬度為p标簽的寬度即可。真實問題解決辦法同理。真實環境中大的寬度通常是由于設定固定寬度元素浮動形成的一個大的寬度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body{min-width: 1280px;}
</style>
<body>
<div style="background: #eee;">
測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字
<p style="background-color: red;width: 1280px;">1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽1280px寬的的p标簽</p>
測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字
</div>
</body>
</html> 4、總結
雖然是小問題，但是平時開發還是必須注意。因為很多線上的頁面有這樣的問題。比如csdn
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章内容也不定時更新，為避免誤導讀者，友善追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/5197510.html有問題歡迎與我讨論，共同進步。