滾動條寬度到底是多少?

2021-06-28 14:06:50 字數 1586 閱讀 8204

我把顯示解析度從1440*900調到800*600,用如下的css和html簡單的做了一下測試。

html:

用於測試的div。

css:

*

#content

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

如果將視窗最大化右會是怎樣的呢?

於是,我按「f11」鍵,再次調整#content的width屬性。結果,在firefox2和ie7中為784px時,恰好沒有水平滾動條了,而在ie6中,為788px時,恰好沒有水平滾動條了。

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

可以下結論了?問了問室友兼戰友rainman,他做的乙個專案的首頁是1000px寬的。當他把寬度調為1003px時在ie6中就沒有了水平滾動條。難道在不同解析度下,右側滾動條的寬度右不相同嗎。

於是,把解析度調到1024*768,將#content的width改為1004px為預設寬度。此時要注意乙個問題,就是高度也要調大,要不然在firefox中就不會出現視窗右側的滾動條。

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

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

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

但還是忍不住,做一下寬度為1280px和1440px解析度的。

現在把結果總結為下表:

螢幕解析度(寬度)

ie6(滾動條寬度,下同)

ie7firefox2

標準最大化

標準最大化

標準最大化

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

HBase SplitSize 到底是多少

大家都知道hbase的乙個重要特性就是split,split通常情況下是自動執行的,而trigger條件就是region的size到達一定大小。那麼到底這個大小是多少納?筆者google了一些文章,不少文章說是256m,但也有一些說是1g。那麼到底是多少納?hbase是支援設定table級別的spl...

HBase SplitSize 到底是多少

大家都知道hbase的乙個重要特性就是split,split通常情況下是自動執行的,而trigger條件就是region的size到達一定大小。那麼到底這個大小是多少納?筆者google了一些文章,不少文章說是256m,但也有一些說是1g。那麼到底是多少納?hbase是支援設定table級別的spl...

獲取滾動條的寬度

做了乙個全屏的輪播圖,在設計師那發現問題,banner獲取的寬度是瀏覽器的寬度,在瀏覽器不是全屏的情況下開啟再放大瀏覽器,banner不能全屏顯示。問題其實很簡單,把獲取瀏覽器的寬度改為獲取螢幕寬度就可以了,但瀏覽器的滾動條會佔據一定的寬度,所以需要獲取瀏覽器的滾動條寬度,然後減去這部分寬度,就是b...