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

前端开发时，有时需要针对特定的 Internet Explorer (IE) 版本应用 CSS hack 或 JavaScript hack，以解决某些版本特有的问题或实现特定功能。以下是一些常见的针对不同版本 IE 的 hack 写法：

CSS Hacks

1. IE6 Hack

   • 使用下划线 _ 或星号 * 前缀的选择器，例如：_selector 或 *selector。
   • 使用特定的 CSS 属性或值，例如：zoom: 1。

.ie6-only { _color: red; } /* 仅 IE6 识别 */

2. IE7 Hack

   • 使用 *+html 或 :first-child+html 选择器。

*+html .ie7-only { color: blue; } /* 仅 IE7 识别 */

3. IE8 Hack

   • 利用 CSS3 的某些特性，结合 \9 后缀。

.ie8-only { color: green\9; } /* 仅 IE8 识别 */

4. IE9 Hack

   • 使用条件注释结合 CSS 文件。

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->

5. IE10/11 Hack

   • 由于 IE10 和 IE11 对条件注释的支持已经移除，通常需要使用 JavaScript 来检测。
   • 可以利用某些 CSS 属性的不完全支持或 bug。

6. Edge Hack

   • Edge 较为接近标准，因此直接的 hack 较少。
   • 通常可以通过 @supports 特性查询或 JavaScript 检测。

JavaScript Hacks

1. 条件注释

   • 对于 IE9 及以下版本，可以使用条件注释来加载特定的 JavaScript 文件。

<!--[if lt IE 9]>
<script src="ie8-and-below.js"></script>
<![endif]-->

2. document.documentMode

   • 在 IE 中，document.documentMode 返回当前文档的渲染模式。这可以用来检测 IE 版本。

var ieVersion = document.documentMode || 0;
if (ieVersion === 10) {
    // IE10 特定的代码
}

3. UserAgent 检测

   • 通过检查 navigator.userAgent 字符串来识别浏览器和版本。但这种方法不太可靠，因为 UserAgent 可以被修改。

var isIE = /MSIE|Trident/.test(navigator.userAgent);

4. 特性检测

   • 而不是直接检测浏览器版本，检查浏览器是否支持特定的功能或 API。这种方法更加现代和健壮。

if ('someFeature' in window) {
    // 使用 someFeature
} else {
    // 使用备选方案
}

注意：

• 尽量避免使用 hack，因为它们可能随着浏览器更新而失效。
• 优先使用特性检测和渐进增强策略。
• 对于现代前端开发，通常推荐使用自动化工具（如 Babel、PostCSS 等）来处理浏览器兼容性问题。