浏览器兼容性之Css篇

时间：2024-01-02 14:37:28

　　本文与上一篇随笔《浏览器兼容性之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浏览器兼容性之Css篇 　

　　在线预览与配置滚动条样式地址：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浏览器兼容性之Css篇

　　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{;}
.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

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

.box{
　　/*阴影*/
　　box-shadow: 3px 3px 5px #ccc;                 /* IE */
　　-moz-box-shadow: 3px 3px 5px #ccc;        /* firefox */
　　-webkit-box-shadow: 3px 3px 5px #ccc;    /* webkit */

　　/*圆角*/
　　　　   border:1px solid #ccc;　　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

浏览器兼容性之Css篇

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

本文只介绍本人开发工程中遇到的兼容性问题，其它更多的兼容性解决方案请参考以下博客：

http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html

http://www.cnblogs.com/TT809800327/archive/2011/09/23/2186082.html

http://www.cnblogs.com/leonn/archive/2009/06/17/1504712.html

相关文章