ie兼容性问题总结

一. 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新特性总结（一）-新标签