当前位置:Gxlcms > html代码 > 浏览器兼容性之Css篇_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:20人阅读

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

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

.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

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

人气教程排行