兼容ie9及以下浏览器的几个Tips

对于使用Vue的站点，IE 8是不被支持的，实际上在IE 9上就有些CSS属性不被支持。产品侧的方案是ie9及以下浏览器的访问都重定向到一个新页面，引导用户升级浏览器后访问。其实也可以像QQ空间、360导航一样，顶部呈现一个提示条提示用户浏览器版本过低。如果是新页面的话，应确保设计元素不能太复杂，这些浏览器CSS属性支持不够友好。以下有些小点，记录一下： 1、IE识别的问题 JS读取UserAgent中的版本信息识别是一种，还有就是在html模板中添加

<!--[if lt IE 9]><html lang="en-US" class="lt-ie9 l-ie9"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9"><![endif]-->

通过在html标签中增加用于标记的类名，就可以做到很多事情了，如重定向或者在顶部插入一个提示条，if其他的规则自行搜索。

在重定向部分,QQ空间也用meta标签refresh进行重定向，类似这样

<meta http-equiv="refresh" content="0; url='http://www.qq.com/'">

不过实际体验上会比js重定向慢一些。参考文章在这：小tip: 使用meta实现页面的定时刷新或跳转

2、居中问题

      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -246.5px;
      margin-left: -350px;
      text-align: center;

3、本地测试开发时需要本地测试，一般解决方法是安装虚拟机装上对应浏览器，但是这样操作太麻烦了，又是装系统又是干嘛的。其实IE系列都提供了一个仿真模式，类似可以提供一个低版本IE的文档模式来渲染页面，效果是一样的。

4、一些圆角、阴影的问题迫于设计难免还是会搞出一些圆角、阴影之类的，除了满世界找兼容方案以外，不妨直接切成图片。。。另：svg在IE8及以下是不受支持的。

metroluffy / blog

兼容ie9及以下浏览器的几个Tips #26