【原創(chuàng)】告別惱人的水平滾動(dòng)條——滾動(dòng)條寬度到底是多少？

你知道瀏覽器窗口右側(cè)那個(gè)滾動(dòng)條的寬度到底是多少嗎，你想在你的網(wǎng)頁(yè)在常見(jiàn)的分辨率下中不出水平滾動(dòng)條嗎，在這里，你也許會(huì)找到你想要的。

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

我把顯示分辨率從1440*900調(diào)到800*600，用如下的css和html簡(jiǎn)單的做了一下測(cè)試。

html：

       css：

       結(jié)果ie7上沒(méi)有水平滾動(dòng)條（width為781px有），而在ie6和firefox2上都出現(xiàn)了水平滾動(dòng)條。如果是20px的話(huà)，就應(yīng)該不會(huì)出現(xiàn)水平滾動(dòng)條啊。于是我將div#content的width屬性減小。當(dāng)改為776px時(shí)，firefox2中水平滾動(dòng)條恰好不見(jiàn)了，而ie6依然有。當(dāng)改為772px時(shí)，ie6中的水平滾動(dòng)條也恰好沒(méi)有了，firefox2當(dāng)然也沒(méi)有了。難道ie6下瀏覽器窗口右側(cè)的滾動(dòng)條為28px，firefox2中是24px，ie7下為20px？

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

       于是，我按“F11”鍵，再次調(diào)整div#content的width屬性。結(jié)果，在firefox2和ie7中為784px時(shí)，恰好沒(méi)有水平滾動(dòng)條了，而在ie6中，為788px時(shí)，恰好沒(méi)有水平滾動(dòng)條了。

如果最大化，那么ie6中右側(cè)滾動(dòng)條為12px，ie7和firefox2為16px，是這樣嗎？

       可以下結(jié)論了？問(wèn)了問(wèn)室友兼戰(zhàn)友rainman，他做的一個(gè)項(xiàng)目的首頁(yè)是1000px寬的。當(dāng)他把寬度調(diào)為1003px時(shí)在ie6中就沒(méi)有了水平滾動(dòng)條。難道在不同分辨率下，右側(cè)滾動(dòng)條的寬度右不相同嗎。

       于是，把分辨率調(diào)到1024*768，將div#content的width改為1004px為默認(rèn)寬度。此時(shí)要注意一個(gè)問(wèn)題，就是高度也要調(diào)大，要不然在firefox中就不會(huì)出現(xiàn)窗口右側(cè)的滾動(dòng)條。

結(jié)果在ie6、ie7和firefox2上都沒(méi)有了水平滾動(dòng)條。再次調(diào)大，當(dāng)為1005px時(shí)，ie6和ie7就都出現(xiàn)了水平滾動(dòng)條，調(diào)到1008px時(shí)，firefox2下恰好沒(méi)有了滾動(dòng)條。

       汲取上一次經(jīng)驗(yàn)，再次把窗口最大化。確定，1008px時(shí)，ie7和firefox2正好沒(méi)有水平滾動(dòng)條；1012px時(shí)，ie6正好沒(méi)有水平滾動(dòng)條。

       做到這里，也就豁然開(kāi)朗了。雖然現(xiàn)在的網(wǎng)頁(yè)寬度沒(méi)有也沒(méi)有必要大于1024px，

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

       現(xiàn)在把結(jié)果總結(jié)為下表：

屏幕分辨率（寬度）	IE6（滾動(dòng)條寬度，下同）		IE7		Firefox2
	標(biāo)準(zhǔn)	最大化	標(biāo)準(zhǔn)	最大化	標(biāo)準(zhǔn)	最大化
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寬度以上，各個(gè)瀏覽器的滾動(dòng)條的寬度都是沒(méi)變的。從這個(gè)表里，相信你會(huì)看到更多的東西。如果時(shí)間充裕，下次會(huì)測(cè)試一下Opera的。