浏览器兼容性之Css篇_html/css_WEB-ITnose

　　本文与上一篇随笔《浏览器兼容性之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;}<br />该样式可以引用到任意需要滚动条样式的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;}<br />这里是纯样式，所以没有用图片，其实webkit滚动条样式是可以用图片的，但由于项目自身原因，需要与ie下的效果保持一致，效果图如上图2。

 

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

 

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

 

  二、盒子模型的阴影和圆角效果

.box{　　/*阴影*/　　box-shadow: 3px 3px 5px #ccc;                 /* IE */　　-moz-box-shadow: 3px 3px 5px #ccc;        /* firefox */　　-webkit-box-shadow: 3px 3px 5px #ccc;    /* webkit */　　/*圆角*/　　<br />　　<br />   border:1px solid #ccc;<br />　　border-radius: 4px;　　-webkit-border-radius: 4px;　　-moz-border-radius: 4px;}           

box-shadow的四个参数：x轴偏移,y轴偏移,模糊值,阴影颜色

 

如果想四个方向都有阴影效果且用不同颜色渲染，效果见图4，代码如下：

.box {    width:300px;    height:300px;    background-color:#fff;        /* 设置阴影 */    -webkit-box-shadow:1px 1px 3px green, -1px -1px 3px blue;    -moz-box-shadow:1px 1px 3px green, -1px -1px 3px blue;    box-shadow:1px 1px 3px green, -1px -1px 3px blue;}

图3

   但是阴影效果在css3.0以前的浏览器是不支持的，若想兼容css2.0，需要使用javascript实现，方法见上一篇随笔；或者用png的图片设置背景来实现，这里不再累述。