记录浏览器兼容性问题

渐变及阴影

目前项目中有一些饼图、柱状图、折线图，而这些图背景都要支持渐变，渐变为css3的线性渐变linear-gradient属性，但IE是不支持的，需要用到滤镜来实现

 1 /*分垂直渐变（top/bottom）和水平渐变(left/right)*/
 2 .test
 3 {
 4 /*IE*/
 5 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1');
 6 /*FF*/
 7 background: -moz-linear-gradient(left, #FF0000, #F9F900); 
 8 /*opear*/
 9 background: -o-linear-gradient(left,#FF0000, #F9F900);
10 /*chrome,safari*/
11 background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900));
12 }

View Code

而阴影为box-shadow属性，IE下也会用滤镜实现

 1 .box-shadow{
 2 filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
 3 
 4 background-color: #eee;
 5 
 6 -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
 7 
 8 -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
 9 
10 box-shadow:2px 2px 5px #969696;/*opera或ie9*/
11 
12 }

View Code

最好是少用box-shadow;gadients 拥抱扁平化，当然业务需要就没办法了。

_、*、+

IE6,7识别*;

IE6识别_;

IE7识别+;

在相应版本的IE下能识别、引入

<!--[if lt IE7]>

<![endif]-->

如上IE7下执行

DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

1 #box{ float:left; width:800px;}   
2 #left{ float:left; width:50%;}   
3 #right{ width:50%;}   
4 #left{ margin-right:-3px; /*这句是关键*/} 
5    
6 <div id="box">   
7 <div id="left"></div>   
8 <div id="right"></div>   
9 </div>

View Code

display:inline-block

这个属性设置后的元素表现为具有block元素可以设置宽高特性，同时又具有inline元素默认不换行的特性；并且设置时要考虑到设置到块级元素上和行内元素上的不同，现代浏览器和IE8以下浏览器的不同；

跨浏览器实现代码如下：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <title>display inline-block</title>
 5 <style type="text/css">
 6 .list{
 7        width:700px;
 8        margin:100px auto 0;
 9        font-size:0px;
10         /*IE下去掉空隙*/
11        *word-spacing:-1px;
12 }
13 .list li{
14        display:inline-block;
15        width:198px;
16        height:30px;
17        line-height:30px;
18        text-align:center;
19        border:1px solid #000;
20        /*块级元素先强制转换为inline*/
21        *display:inline;
22         /*触发IE hasLayout(拥有布局)*/
23        *zoom:1;
24        font-size:12px;  
25        letter-spacing:normal;
26        *word-spacing:normal;
27 }
28 .list a{
29        display:inline-block;
30        width:198px;
31        height:30px;
32        /*垂直方向上居中 设置为跟高度一样的px*/
33        line-height:30px;
34        /*水平方向容器内居中*/
35        text-align:center;
36        border:1px solid #000;
37        font-size:12px;
38        /*增加或减少字符间的空白（字符或字母之间）*/
39        letter-spacing:normal;
40        /*改变字（单词）之间的标准间隔*/
41        *word-spacing:normal;
42 }
43 </style>
44 </head>
45 <body>
46 <!--块级子元素li--> 
47 <ul class="list">
48     <li>块级1</li>
49     <li>块级2</li>
50     <li>块级3</li>
51 </ul>
52 <!--行内元素a标签-->
53 <div class="list">
54     <a href="#">行内1</a>
55     <a href="#">行内2</a>
56     <a href="#">行内3</a>
57 </div>
58 </body>
59 </html>

View Code

IE圆角border-radius实现

圆角border-radius属性是css3的属性，目前项目中在IE下采用iecss3.htc方式来实现，具体实现如下:

 1 /*利用VML矢量可标记语言作为画笔绘出圆角 当然如果用图片的话就不存在浏览器兼容问题了,但一方面增加http请求次数，又体验和技术感觉不好*/
 2 .radius{
 3    border: 2px solid #C0C0C0;  
 4    -moz-border-radius: 10px;    
 5    -webkit-border-radius: 10px; 
 6     border-radius: 10px;  
 7    /*IE下实现关键部分*/  
 8    position:relative;    
 9    z-index:10;
10    behavior: url(此处为ie-css3.htc文件的绝对路径);    
11 }

View Code

判断浏览器是怪异模式还是标准模式

document.compatMode

BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。

一个准确获取网页客户区的宽高代码：

 1 var pageWidth=window.innerWidth,
 2 pageHeight=window.innerHeight;
 3 if(typeof pageWidth!='number'){
 4     if(document.compatMode=='CSS1Compat'){
 5     pageWidth=document.documentElement.clientWidth;
 6     pageHeight=document.documentElement.clientHeight;
 7     }
 8     else{
 9     pageWidth=document.body.clientWidth;
10     pageHeight=document.body.clientHeight;
11     }
12 
13 }

View Code

主要针对页面滚动条的情况

IE双边距BUG

一个DIV里面包含一个浮动的DIV,浮动的DIV添加margin：5px 100px 5px 0 边距，在IE下左边距为200px，解决方法添加display:inline.

///持续添加中。。。