【原创】告别恼人的水平滚动条——滚动条宽度到底是多少？

相信不管是web前端还是后台的程序员，都讨厌网页水平方向出现滚动条。而要避免出现水平滚动条，计算宽度是必不可少的。而在设计过程中，设计师一般避免计算这个右侧滚动条的宽度。为了避免出现水平滚动条，而将宽度设为比具体分辨率少五六十像素的宽度。如YUI推荐的宽度750px对800*600的分辨率，950px或974px对1024*768的分辨率。一般认为：这个滚动条的宽度为20px，那窗口右侧的滚动条的宽度究竟是不是20px呢，在不同的主流浏览器上是不是一样的呢？

我把显示分辨率从1440*900调到800*600，用如下的css和html简单的做了一下测试。

html：

<div id="content">

           <span>用于测试的div。</span>

</div>

       css：

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

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

       结果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的。