欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2023-12-23 11:46:04
...
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浏览器?的详细内容,更多请关注其它相关文章!

上一篇:

下一篇: