本文与上一篇随笔《浏览器兼容性之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的图片设置背景来实现,这里不再累述。