渐变及阴影
目前项目中有一些饼图、柱状图、折线图，而这些图背景都要支持渐变，渐变为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 }
而阴影为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 }
最好是少用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>
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>
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 }
判断浏览器是怪异模式还是标准模式
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 }
主要针对页面滚动条的情况
IE双边距BUG
一个DIV里面包含一个浮动的DIV,浮动的DIV添加margin：5px 100px 5px 0 边距，在IE下左边距为200px，解决方法添加display:inline.
///持续添加中。。。