一. svg不兼容ie8及以下
解决方法: 添加image标签,src="png";
ie下,svg上右键就可以下载png格式图片
<svg id="circle1" data-parallaxify-range-x="100" data-parallaxify-range-y="50" xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 120 120" style="transform: matrix(1, 0, 0, 1, -0.55, 1.54167);">
<image src="./img/circle1.png" width="90" height="90" />
<circle class="circle" cx="59.5" cy="59.5" r="44.5"></circle>
</svg>
or
<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
</svg>
其余方法:background:兼容处理
.my-element {
background-image: url(fallback.png);
background-image: url(image.svg), none;
}
二. ie9及以下不支持的属性 及解决方法:
- border有边框
解决方法: img{border:0;} reset中就有。
- transform
变换 可以换成改变 left/top;有时也可以改变margin-left/margin-top效果更好。
- animation/keyframes;
暂时没找到解决方法,ie10以下,也就可以不做动画了吧。
- @media 与ie6不支持max-width;
使用respond.js ;但要注意respond的使用方法;
具体使用方法:可以看 HTML5新特性总结(一)-新标签