ie 兼容性

优雅的判断ie版本根据条件注释

var isIE = function(ver){
    var b = document.createElement('b')
    b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->'
    return b.getElementsByTagName('i').length === 1
}

条件注释.html

由于需要做一个兼容性非常高的页面，所以用到了大量的IE版本条件注释，整理如下（如有错误，请在下面留言指正）：

<!–[if !IE]><!–><!–<![endif]–><!–除IE外都可识别（IE10版本以上也可以识别）–>
<!–[if IE]><![endif]–><!–IE9以及以下版本可识别–>
<!–[if IE 5]><![endif]–><!–仅IE5可识别–>
<!–[if IE 5.0]><![endif]–><!–仅IE5.0可识别–>
<!–[if IE 5.5]><![endif]–><!–仅IE5.5可识别–>
<!–[if IE 6]><![endif]–><!–仅IE6可识别–>
<!–[if IE 7]><![endif]–><!–仅IE7可识别–>
<!–[if IE 8]><![endif]–><!–仅IE8可识别–>
<!–[if IE 9]><![endif]–><!–仅IE9可识别–>
<!–[if lt IE 5]><![endif]–><!–IE5以下版本可识别–>
<!–[if lt IE 5.0]><![endif]–><!–IE5.0以下版本可识别–>
<!–[if lt IE 5.5]><![endif]–><!–IE5.5以下版本可识别–>
<!–[if lt IE 6]><![endif]–><!–IE6以下版本可识别–>
<!–[if lt IE 7]><![endif]–><!–IE7以下版本可识别–>
<!–[if lt IE 8]><![endif]–><!–IE8以下版本可识别–>
<!–[if lt IE 9]><![endif]–><!–IE9以下版本可识别–>
<!–[if lte IE 5]><![endif]–><!–IE5以及IE5以下版本可识别–>
<!–[if lte IE 5.0]><![endif]–><!–IE5.0以及IE5.0以下版本可识别–>
<!–[if lte IE 5.5]><![endif]–><!–IE5.5以及IE5.5以下版本可识别–>
<!–[if lte IE 6]><![endif]–><!–IE6以及IE6以下版本可识别–>
<!–[if lte IE 7]><![endif]–><!–IE7以及IE7以下版本可识别–>
<!–[if lte IE 8]><![endif]–><!–IE8以及IE8以下版本可识别–>
<!–[if lte IE 9]><![endif]–><!–IE9以及IE9以下版本可识别–>
<!–[if gt IE 5]><![endif]–><!–IE5以上版本可识别–>
<!–[if gt IE 5.0]><![endif]–><!–IE5.0以上版本可识别–>
<!–[if gt IE 5.5]><![endif]–><!–IE5.5以上版本可识别–>
<!–[if gt IE 6]><![endif]–><!–IE6以上版本可识别–>
<!–[if gt IE 7]><![endif]–><!–IE7以上版本可识别–>
<!–[if gt IE 8]><![endif]–><!–IE8以上版本可识别–>
<!–[if gt IE 9]><![endif]–><!–IE9以上版本可识别–>
<!–[if gte IE 5]><![endif]–><!–IE5以及IE5以上版本可识别–>
<!–[if gte IE 5.0]><![endif]–><!–IE5.0以及IE5.0以上版本可识别–>
<!–[if gte IE 5.5]><![endif]–><!–IE5.5以及IE5.5以上版本可识别–>
<!–[if gte IE 6]><![endif]–><!–IE6以及IE6以上版本可识别–>
<!–[if gte IE 7]><![endif]–><!–IE7以及IE7以上版本可识别–>
<!–[if gte IE 8]><![endif]–><!–IE8以及IE8以上版本可识别–>
<!–[if gte IE 9]><![endif]–><!–IE9以及IE9以上版本可识别–>

获取ie版本号，包括edge

// Get IE or Edge browser version
var version = detectIE();

if (version === false) {
  document.getElementById('result').innerHTML = '<s>IE/Edge</s>';
} else if (version >= 12) {
  document.getElementById('result').innerHTML = 'Edge ' + version;
} else {
  document.getElementById('result').innerHTML = 'IE ' + version;
}

// add details to debug result
document.getElementById('details').innerHTML = window.navigator.userAgent;

/**
 * detect IE
 * returns version of IE or false, if browser is not Internet Explorer
 */
function detectIE() {
  var ua = window.navigator.userAgent;

  // Test values; Uncomment to check result …

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';
  
  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';
  
  // Edge 12 (Spartan)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';
  
  // Edge 13
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  var edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }

  // other browser
  return false;
}