web前端|css教程
Firefox,webkit,Chrome
web前端-css教程
CSS教学
html5效果源码,ubuntu查看进程流量,tomcat xms4g,c 通用爬虫,PHP视频接口,seo零基础自学信息流广告lzw
最近在完善自己的网站时，偶然发现点击导航处不同的栏目的时候，网页文字会有左右闪动（漂移）的现象，经过仔细检查思考，发现问题出在浏览器右侧的滚动条上，即：当网页内容高度不到一屏的时候；右侧没有出现滚动条，此时计算的屏幕宽度应为整个显示器的宽度（假设为1440），而当网页内容高度超过一屏的时候，计算的屏幕宽度应为1440-滚动条宽度，由于这个原因，当你设置了margin: 0 auto，在短屏和长屏之间切换时，就会造成网页的微弱跳动感。
淘客之家代理系统源码,Ubuntu关闭远程协助,tomcat5 系统服务,河池爬虫防治,临沂网站建设方案php,SEO考考lzw
基于上述问题，就想着怎么样解决，但是经过不断尝试，最终得出结论，这个问题基本上是无法彻底解决，因为还取决于不同浏览器的表现上。拿IE8、搜狗、Chrome这三个浏览器做测试，大家知道，搜狗浏览器的最新版有着兼容（IE内核）和高速（WebKit内核）两种模式，高速模式下，搜狗的表现已经和Chrome相当接近了（或者说我还没有看见差别），但是奇怪的是，在兼容模式下，虽然是调用的IE内核，但是却和纯粹的IE8表现不一样，举个例子，针对短网页（不够一屏），搜狗虽然不会出现滚动条，但是在屏幕右侧会预留一个空白的宽度放滚动条备用，就是说对于搜狗兼容模式，不论短屏长屏，计算宽度永远是为1440-滚动条宽度，IE8则不然，短屏时不会出现预留的滚动条备用宽度，长屏时候自动添加宽度，这点竟然和Chrome的表现一样，匪夷所思！目前市面上的浏览器种类花样繁多，要做全部兼容实在无能为力，所以这块我打算放弃作调整。
banner网站制作源码,vscode为什么如此稳定,ubuntu git卸载,怎么加tomcat包,爬虫用golang,php 创建文件失败,丽水站外seo优化价格,中英双语网站php响应源码,电影票模板lzw
虽然问题没有解决，但是最终还是对滚动条做了一点美化，基本达到了和页面配色的统一。滚动条的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; }
