04 IE 兼容性

通用

IE if

<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--> 
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]--> 
<!--[if IE 6]> 仅IE6可识别 <![endif]--> 
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> 
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> 
<!--[if IE 7]> 仅IE7可识别 <![endif]--> 
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> 
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

隐藏 input 框的清除按钮

#textFieldId::-ms-clear {display: none;}
input[type=text]::-ms-clear { display: none; }

判断 IE8 以下

var DEFAULT_VERSION = 8.0;
var ua = navigator.userAgent.toLowerCase();
var isIE = ua.indexOf('msie') > -1;
var safariVersion;
if (isIE) {
    safariVersion = ua.match(/msie ([\d.]+)/)[1];
}
if (safariVersion <= DEFAULT_VERSION) {
    // ie8
}

IE 不支持 classList

<script src="https://cdn.jsdelivr.net/npm/[email protected]/classList.min.js"></script>

ajax 不支持 formData

$.support.cors = true;
$.ajax({
  type: 'post',
  url: '#',
  data: $(form).serialize(),
  success: function (response) {
    if (response) {
      var data = response;
      if (data.status === 1) {
        popup.showMessageBox(data.info, true);
      } else {
        popup.showMessage(data.info, 'error');
      }
    } else {
      popup.showMessage('提交失败', 'error');
    }
  },
  error: function (er) {
    //
  },
  complete: function () {
    //
  },
});

IE8 兼容性问题

1. 某些标签无法使用。如nav、section、footer

2. 制作响应式网站时，先制作桌面版网站，再来制作手机版。

3. 可以使用 PIE.htc 解决 box-radius、线性渐变 ( linear-gradient)、rgba、box-shadow、border-image的兼容性问题，但是要看服务器是否支持 htc 的文件格式，否则部署到服务器之后不可用。

4. 无法使用的css样式（部分）：

border-radius
rgba
:last-child

1. 无法使用的js方法（部分）：

Object.keys();
$.getJSON
//解决办法：https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest，记得设置$.ajaxSetup({ cache: false }); 否则会有缓存

IE9兼容性问题

1. 使用透明颜色时，必须使用 rgba(0,0,0,.5) ，不要使用 rgb(0,0,0,.5)

2. 使用 console.log() 时，必须先判断 if(window.console){...}，不然可能会阻塞代码运行。

3. 使用 transform 属性时，加上 -ms- 的前缀。