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;  
}

以上是CSS滾動條樣式如何相容於IE8和Chrome瀏覽器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！