当前位置: 首页  >  HTML/CSS  >  浏览器兼容性之Css篇

浏览器兼容性之Css篇 TOP

  本文与上一篇随笔《浏览器兼容性之Javascript篇》有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起讨论。

      最近公司的BS产品对浏览器兼容性呼声愈来愈多,具体用户事情情况其实不是我关心的问题,总之工作都是都围绕着IE6-IE10(IE11暂时没涉及),Chrome,FireFox三大主流浏览器进行,(顺便吐槽一下Firefox已经算不上主流了),另外360和搜狗浏览器的使用者还是比较多。作为平台维护的我不论在美工方面,还是用户体验方面都需要有所提升才行,不得不面对一堆主流浏览器展开工作,目前遇到的问题有以下几点:滚动条样式;盒子模型的阴影效果;部分控件圆角效果;动画效果;下面就用案例来说明吧。

  一、窗体或Dom滚动条样式渲染效果

  

   大多数人都觉得浏览器滚动条样子太过土包了,根据需求不得不美化一下。IE浏览器有几个样式可以设置滚条的样式,但都只是简单的调整颜色之类的,而且这些属性只支持IE浏览器,不兼容webkit内核的浏览器,所以针对webkit还要另辟蹊径了。最后还有一个方案是用javascript、css、图片实现自定义滚动条,下次再论。

  针对滚动条,除了样式之外,功能方面也有几点需要注意:有些地方一定不能有滚动条使用overflow:hidden;有些地方只需要纵向滚动条或只需要横向滚动条overflow-x/y:hidden;都需要overflow:auto。

  1、滚动条结构图与在线预览效果

  图1  

  在线预览与配置滚动条样式地址:http://www.dengjie.com/temp/scroller.swf

 

  2、IE下设置滚动条样式的属性

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/
.ScrollBar {
  scrollbar-arrow-color:  #000000;
  scrollbar-base-color: #71b2dc;
  scrollbar-face-color: #71b2dc;
  scrollbar-shadow-color: #71b2dc;
  scrollbar-highlight-color: #71b2dc;
  scrollbar-3dlight-color: #88b8ed;
  scrollbar-darkshadow-color: #88b8ed;
  scrollbar-track-color:#bde6ff;
}
该样式可以引用到任意需要滚动条样式的Box模型中,以下是效果图

图2

 

  3、Chrome下设置滚动条样式的属性

::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track  外层轨道
::-webkit-scrollbar-track-piece  内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

  

  

/*---webkit 滚动条样式--*/  
.ScrollBar::-webkit-scrollbar-thumb{background-color:#71b2dc;  height:50px;outline-offset:-1px; outline:1px solid #88b8ed;  -webkit-border-radius:0px;  }
.ScrollBar::-webkit-scrollbar-thumb:hover{background-color:#bde6ff;height:50px; -webkit-border-radius:0px;}
.ScrollBar::-webkit-scrollbar{width:17px; height:17px;}  
.ScrollBar::-webkit-scrollbar-track-piece{background-color:#bde6ff;border:none;-webkit-border-radius:0;}
.ScrollBar::-webkit-scrollbar-button {width:16px;height:16px;background-color:#bde6ff;outline:1px solid #88b8ed;outline-offset:-1px; font-size:0px;}
.ScrollBar::-webkit-scrollbar-button:vertical:decrement{border-left:8px dashed  transparent;border-right:8px dashed  transparent;  border-bottom:7px solid #000;height:12px;}
.ScrollBar::-webkit-scrollbar-button:vertical:increment{border-left:8px dashed  transparent;border-right:8px dashed  transparent;  border-top:7px solid #000;height:12px;}
.ScrollBar::-webkit-scrollbar-button:horizontal:decrement{border-top:8px dashed  transparent;border-bottom:8px dashed  transparent;  border-right:7px solid #000;width:12px;}
.ScrollBar::-webkit-scrollbar-button:horizontal:increment{border-top:8px dashed  transparent;border-bottom:8px dashed  transparent;  border-left:7px solid #000;width:12px;}
.ScrollBar::-webkit-scrollbar-corner {background-color:#bde6ff;}
这里是纯样式,所以没有用图片,其实webkit滚动条样式是可以用图片的,但由于项目自身原因,需要与ie下的效果保持一致,效果图如上图2。

 

  其它预览效果:http://almaer.com/scrollbar/index.html

 

      4、火狐目前没有找到支持滚动条样式的CSS

Views:1110   Posted at:2013-10-31
收藏 推荐 打印 | 录入:Admin | 阅读:0