CSS滚动条样式如何兼容IE8和Chrome浏览器？-css教程-PHP中文网

CSS滚动条样式如何兼容IE8和Chrome浏览器？

黄舟

发布： 2017-07-21 14:31:49

原创

3690人浏览过

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中文网其它相关文章！