告别恼人的水平滚动条——滚动条宽度到底是多少?
相信不管是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的。
總結
以上是生活随笔為你收集整理的告别恼人的水平滚动条——滚动条宽度到底是多少?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: CSS float
- 下一篇: shell 下 urlencode/ur