IE9兼容整理

参考链接：

1. 浏览器对css3,html5支持情况
2. ie9对css3属性支持一览表（供参考）

一、ie9不支持的css3属性及实例

1. IE9只支持2d转换，不支持3d转换

   在设置内容垂直居中时，要将 translate3d(-50%,-50%,0) 改成 translate(-50%,-50%)

   .parent_box{
      position: relative;
    }
    .child_box{
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
    }
   

2. linear-gradient

   IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0 表示垂直渐变，1 表示水平渐变

   注：颜色值要写6位，如：#fff,要写成#ffffff,才达到想要的效果

   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#2b8ac3, endColorstr=#2d97d6);/*IE<9>*/
   

二、ie9不支持的html5属性及实例

1. placeholder兼容方法

   • 在html中加入

     <!--[if lte IE 9]>
       <script src="https://cdn.bootcss.com/jquery-placeholder/2.3.1/jquery.placeholder.min.js"></script>    
      <![endif]--> 
     

   • 在css中加入

     .my-placeholder{
         color: #999;
     }
     

   • 在js中加入

     var ieMode, isIE, isIE9;
     
     ieMode = document.documentMode; 
     isIE = !!window.ActiveXObject; 
     isIE9 = isIE && ieMode == 9;
     //让ie9兼容placeholder属性
     if(isIE9){
       $('input, textarea').placeholder({customClass:'my-placeholder'});
     }
     

三、清除ie默认行为

1. type="text"时，IE浏览器会有关闭叉叉，type="password"时，会有查看密码的眼睛

注：只能清掉IE10以上版本，去不掉ie9

input::-ms-clear,
input::-ms-reveal{
    display:none;
}

九、探讨

讨论兼容IE9的方式

1. 优雅降级
2. 针对IE9单独花时间做兼容处理
3. 针对部分有必要兼容的地方做兼容处理，其他遵循优雅降级

四. ie9不支持弹性盒模型

布局就最好不要使用弹性盒模型了。

五. ie浏览器版本判断

1. 判断是否为ie浏览器

• 正则判断

var isIE = (/Trident\/7\./).test(navigator.userAgent);

注： 包括ie11

• ActiveX控件判断

var isIE = !!window.ActiveXObject; 

注：ie11不支持此控件，所以用此方法只能判断ie10及以下的版本

2. 判断ie版本是否小于9

   navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9
   

3. 判断是否为指定版本（除了ie11）

   var ieMode, isIE, isIE8, isIE9, isIE10;
   
   ieMode = document.documentMode; 
   isIE = !!window.ActiveXObject; 
   isIE8 = isIE && ieMode == 8;
   isIE9 = isIE && ieMode == 9;
   isIE10 = isIE && ieMode == 10;