IE(6/7/8/9/10/11/Edge)下的hack写法分别有哪些？

IE浏览器，特别是IE6到IE11以及早期的Edge，由于对Web标准的支持不一致，前端开发者经常需要使用CSS hack来针对不同版本进行样式调整。以下是一些针对不同IE版本的hack写法，以及一些注意事项：

1. 条件注释 (Conditional Comments): 这是最常用的也是最推荐的IE hack方式，因为它只针对特定IE版本生效，不会影响其他浏览器。

• IE 6:

  <!--[if IE 6]>
    <style>
      /* IE 6 specific styles */
      .element { width: 200px; }
    </style>
  <![endif]-->
  

• IE 7:

  <!--[if IE 7]>
    <style>
      /* IE 7 specific styles */
      .element { width: 300px; }
    </style>
  <![endif]-->
  

• IE 6, 7, 8:

  <!--[if lte IE 8]>
    <style>
      /* IE 6, 7, and 8 specific styles */
      .element { width: 400px; }
    </style>
  <![endif]-->
  

• IE 9:

  <!--[if IE 9]>
    <style>
      /* IE 9 specific styles */
      .element { width: 500px; }
    </style>
  <![endif]-->
  

• IE 10:

  <!--[if IE 10]>
    <style>
      /* IE 10 specific styles */
      .element { width: 600px; }
    </style>
  <![endif]-->
  

• IE 11: IE11不再支持条件注释，可以使用CSS特性检测或JavaScript进行判断。

  • CSS特性检测: 利用IE11不支持某些CSS属性或值的特性。例如：

    _:-ms-fullscreen, :root .selector { /* IE11 specific styles */
      width: 700px;
    }
    

  • JavaScript检测:

    if (navigator.userAgent.match(/Trident\/7\./)) {
      // IE 11 specific code
      document.body.classList.add('ie11');
    }
    

    然后在CSS中使用 .ie11 类选择器：

    .ie11 .element {
      width: 700px;
    }
    

• Edge (早期版本，使用EdgeHTML引擎): 早期Edge版本可以使用类似IE11的特性检测，但随着Edge切换到Chromium引擎，这些hack不再适用。

2. CSS选择器hack (不推荐):

• * html .selector (IE6): 只在IE6中生效。
• *+html .selector (IE7): 只在IE7中生效。
• _property:value; (IE6): 只在IE6中识别下划线前缀的属性。
• :root .selector (IE9+): IE9及以上版本支持:root选择器。

3. JavaScript hack: 通过检测userAgent来判断浏览器版本，然后执行相应的代码。 这种方法与CSS特性检测结合使用可以有效地针对IE11。

重要提示：

• 尽量避免使用CSS hack: 随着现代浏览器的发展，对Web标准的支持越来越好，尽量避免使用hack，优先考虑使用符合标准的CSS和JavaScript。
• 条件注释是首选: 如果必须使用hack，条件注释是最安全和最可靠的方式。
• 充分测试: 使用hack后，务必在目标IE版本和其他浏览器中进行充分测试，确保样式显示正确。
• 逐步淘汰hack: 随着旧版IE浏览器的市场份额下降，可以逐步移除相关的hack代码，简化代码维护。

现在，大多数网站已经不再支持旧版本的IE浏览器。 如果你的目标用户仍然使用这些浏览器，那么使用上述方法可以帮助你解决兼容性问题。 但是，强烈建议尽可能鼓励用户升级到现代浏览器，以获得更好的用户体验和安全性。