CSS捲軸樣式如何相容IE8和Chrome瀏覽器？

CSS教程

最近在完善自己的網站時，偶然發現點擊導航處不同的欄目的時候，網頁文字會有左右閃動（漂移）的現象，經過仔細檢查思考，發現問題出在瀏覽器右側的捲軸上，即：當網頁內容高度不到一屏的時候；右側沒有出現捲軸，此時計算的螢幕寬度應為整個顯示器的寬度（假設為1440），而當網頁內容高度超過一屏的時候，計算的螢幕寬度應為1440-捲軸寬度，由於這個原因，當你設定了margin: 0 auto，在短屏和長屏之間切換時，就會造成網頁的微弱跳動感。

基於上述問題，就想著怎麼樣解決，但是經過不斷嘗試，最終得出結論，這個問題基本上是無法徹底解決，因為還取決於不同瀏覽器的表現上。拿IE8、搜狗、Chrome這三個瀏覽器做測試，大家知道，搜狗瀏覽器的最新版有著相容（IE核心）和高速（WebKit核心）兩種模式，高速模式下，搜狗的表現已經和Chrome相當接近了（或者說我還沒有看見差別），但是奇怪的是，在相容模式下，雖然是調用的IE核心，但是卻和純粹的IE8表現不一樣，舉個例子，針對短網頁（不夠一屏），搜狗雖然不會出現捲軸，但是在螢幕右側會預留一個空白的寬度放捲軸備用，就是說對於搜狗相容模式，不論短屏長屏，計算寬度永遠是為1440-捲軸寬度，IE8則不然，短屏時不會出現預留的捲軸備用寬度，長屏時候自動添加寬度，這點竟然和Chrome的表現一樣，匪夷所思！目前市面上的瀏覽器種類花樣繁多，要做全部相容實在無能為力，所以這塊我打算放棄作調整。

雖然問題沒有解決，但是最終還是對捲軸做了一點美化，基本達到了和頁面配色的統一。捲軸的CSS樣式在IE下面一直有著很好的表現，但是Chrome卻視而不見，網上查閱了大量的資料，游離於各大論壇，基本上都說Chrome的捲軸是無法用CSS來實現的，最好用JS或者圖片來類比等等，不過最後還是有文章提供了相容代碼，讓人意外的是，Chrome的捲軸寬度都能夠通過代碼來設定。試了一下，感覺不錯，記錄一下（含注釋，顏色代碼可以根據自己需要修改）：
針對IE8：

html,body {scrollbar-face-color:#FB4446; /*捲軸3D表面（ThreedFace）的顏色*/ scrollbar-highlight-color:#fff; /*捲軸3D介面的亮邊（ThreedHighlight）顏色*/ scrollbar-shadow-color:#eeeeee; /*捲軸3D介面的暗邊（ThreedShadow）顏色*/ scrollbar-3dlight-color:#eeeeee; /*捲軸亮邊框顏色*/ scrollbar-arrow-color:#000; /*捲軸方向箭頭的顏色 */ scrollbar-track-color:#fff; /*捲軸的拖動地區(TrackBar)顏色*/scrollbar-darkshadow-color:#fff; /*捲軸暗邊框（ThreedDarkShadow）顏色*/ }

針對Chrome：

/*---捲軸預設顯示樣式--*/  ::-webkit-scrollbar-thumb{     background-color:#FB4446;     height:50px;     outline-offset:-2px;     outline:2px solid #fff;     -webkit-border-radius:4px;     border: 2px solid #fff;  }  /*---滑鼠點擊捲軸顯示樣式--*/  ::-webkit-scrollbar-thumb:hover{     background-color:#F01360;     height:50px;     -webkit-border-radius:4px;  }  /*---捲軸大小--*/  ::-webkit-scrollbar{     width:8px;     height:8px;  }  /*---捲動方塊背景樣式--*/  ::-webkit-scrollbar-track-piece{     background-color:#fff;     -webkit-border-radius:0;  }