ie8的css兼容性问题
1.不支持box-shadow属性。
解决方法:
使用-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C7C9CD')";
说明:strength是阴影大小,direction是阴影方位,单位为度,可以为负数,color是阴影颜色 (不支持rgba格式)
使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示(block或inline-block;)
box-shadow: 0 5px 10px rgba(33,36,41,0.2);/* for opera or ie9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C7C9CD')";
2.不支持rgba()格式的颜色
如果设置的背景色有一个透明度,则ie8及以下都不支持
解决办法:使用filter滤镜设置渐变。设置startColorstr和stopColorstr为相同的颜色,相同的透明度,即可达到半透明的背景效果。其中颜色字符串中,第1,2个字符表示透明度,例如当前的7f表示0.5的透明度,其他值自行去查;后面6个字符既是颜色的十六进制格式。
background-color: rgba(29,61,103,.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f1D3D67,endColorstr=#7f1D3D67);
3.不支持opacity属性
解决方法: 使用filter滤镜。注意:在使用filter滤镜设置不透明度时,需要给该元素设置背景色,否则设置的不透明度将没有任作用。这个属性一旦设置成功,那么该属性里的元素或者文字都会有设置的透明度。
background: #fff;
opacity: 0;
filter: alpha(opacity=0);/*兼容ie8及以下*/
4.常用的css3选择器的支持性
1)支持:first-child,不支持:last-child选择器,尽量避免使用last-child选择器 。
2)支持:after和:before选择器
3) 不支持:nth-child选择器
4)不支持:not()选择器
5)不支持:checked,:disabled
6)支持属性选择器,如[attribute^=value],[attribute$=value],[attribute*=value]等
5.不支持border-radius属性
解决方法,可通过pie.js补丁文件解决
下载pie补丁文件,放入项目中
然后在页面中引用
<!-- [if it ie 9] -->
<!-- <script src="/static/plugins/pie/PIE.js"></script> -->
<!-- <[!endif] -- >
border-radius: 4px;
behavior: url(/static/plugins/pie/PIE.htc);
但是使用这个补丁可能会有一些意想不到的问题,所以根据实际情况而定
6.ie9及以下都不支持渐变
解决方法:使用如下方法代替。startColorstr,endColorstr渐变的开始颜色和结束颜色,格式是AARRGGBB,gradiendtType是渐变的方向,1是水平渐变,0是垂直渐变。
progid:DXImageTransform.Microsoft.gradient(startColorstr='#B2FFFFFF',endColorstr='#00FFFFFF',GradientType=0 );
7.其他属性兼容性说明
1)ie9及其以下都不支持css3的@keyframe 规则或 animation 属性,尽量避免使用
2)不支持css3的transform属性(ie9支持代替的-ms-transform属性,仅适用于2D转换
3)不支持background-size属性和border-image属性
8.不支持canvas,和svg
解决方法:使用vml代替,绘制图形
9.不支持placeholder属性
解决方法:自己写一个input组件,使用blur和focus事件来实现placeholder的效果。
`<div>ddd</div> `