滚动条宽度到底是多少?(转
我把显示分辨率从1440*900调到800*600,用如下的css和html简单的做了一下测试。
html:
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
css:
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![滚动条宽度到底是多少?(转 滚动条宽度到底是多少?(转](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
结果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的。