相信不管是web前端還是后臺的程序員，都討厭網頁水平方向出現滾動條。而要避免出現水平滾動條，計算寬度是必不可少的。而在設計過程中，設計師一般避免計算這個右側滾動條的寬度。為了避免出現水平滾動條，而將寬度設為比具體分辨率少五六十像素的寬度。如YUI推薦的寬度750px對800*600的分辨率，950px或974px對1024*768的分辨率。一般認為：這個滾動條的寬度為20px，那窗口右側的滾動條的寬度究竟是不是20px呢，在不同的主流瀏覽器上是不是一樣的呢？

我把顯示分辨率從1440*900調到800*600，用如下的css和html簡單的做了一下測試。

html：

<divid="content">

<span>用于測試的div。</span>

</div>

css：

*{}{margin:0;padding:0;}

div#content{}{width:780px;height:600px;background-color:#ccc;margin:0auto;}

結果ie7上沒有水平滾動條（width為781px有），而在ie6和firefox2上都出現了水平滾動條。如果是20px的話，就應該不會出現水平滾動條啊。于是我將div#content的width屬性減小。當改為776px時，firefox2中水平滾動條恰好不見了，而ie6依然有。當改為772px時，ie6中的水平滾動條也恰好沒有了，firefox2當然也沒有了。難道ie6下瀏覽器窗口右側的滾動條為28px，firefox2中是24px，ie7下為20px？

如果將窗口最大化右會是怎樣的呢？

于是，我按“F11”鍵，再次調整div#content的width屬性。結果，在firefox2和ie7中為784px時，恰好沒有水平滾動條了，而在ie6中，為788px時，恰好沒有水平滾動條了。

如果最大化，那么ie6中右側滾動條為12px，ie7和firefox2為16px，是這樣嗎？

可以下結論了？問了問室友兼戰友rainman，他做的一個項目的首頁是1000px寬的。當他把寬度調為1003px時在ie6中就沒有了水平滾動條。難道在不同分辨率下，右側滾動條的寬度右不相同嗎。

于是，把分辨率調到1024*768，將div#content的width改為1004px為默認寬度。此時要注意一個問題，就是高度也要調大，要不然在firefox中就不會出現窗口右側的滾動條。

結果在ie6、ie7和firefox2上都沒有了水平滾動條。再次調大，當為1005px時，ie6和ie7就都出現了水平滾動條，調到1008px時，firefox2下恰好沒有了滾動條。

汲取上一次經驗，再次把窗口最大化。確定，1008px時，ie7和firefox2正好沒有水平滾動條；1012px時，ie6正好沒有水平滾動條。

做到這里，也就豁然開朗了。雖然現在的網頁寬度沒有也沒有必要大于1024px，

但還是忍不住，做一下寬度為1280px和1440px分辨率的。

現在把結果總結為下表：

屏幕分辨率（寬度）	IE6（滾動條寬度，下同）		IE7		Firefox2
	標準	最大化	標準	最大化	標準	最大化
800px	28px	12px	20px	16px	24px	16px
1024px	20px	12px	20px	16px	16px	16px
1280px	20px	12px	20px	16px	16px	16px
1440px	20px	12px	20px	16px	16px	16px

可以看出，在1024px寬度以上，各個瀏覽器的滾動條的寬度都是沒變的。從這個表里，相信你會看到更多的東西。如果時間充裕，下次會測試一下Opera的。

總結

以上是生活随笔為你收集整理的告别恼人的水平滚动条——滚动条宽度到底是多少？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。