欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>CSS教程

目录导航

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

韩国高防服务器 发布于 2013-06-25  
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;  
}

本文出自零度科技转载请注明出处:http://www.ldisp.com/a/css/2013/1681.shtml

上一篇:css3阴影属性box-shadow
下一篇:CSS 修改 google 浏览器滚动条的方法-webkit-scrollbar

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理