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> `
网友评论