CSS滚动条样式如何兼容IE8和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浏览器?)