IE条件注释仅对IE5–IE9有效，必须写在HTML源码中，现代浏览器完全忽略；document.documentMode适合运行时判断；Modernizr更适用于特性检测；CSS Hack应弃用。
IE条件注释在现代前端项目中已基本失效，仅对 IE5–IE9 有效，且必须写在 HTML 源码中、不能出现在 CSS 文件或 <style> 块里。
条件注释只在 IE5–IE9 生效，其他浏览器完全忽略
这不是“兼容性差”，而是设计如此：IE10+ 和所有现代浏览器（Chrome、Firefox、Edge、Safari）压根不解析 <!--[if IE]> 这类语法，直接当普通 HTML 注释跳过。所以你用它加载 ie8.css，在 Chrome 里连请求都不会发——这既是优点（无冗余加载），也是限制（无法覆盖非 IE 场景）。
常见错误现象：
-
<!-- [if IE]>（开头多空格）→ 失效 -
<!--[if IE]><style>...</style><![endif]-->→ 无效，<style>内不能写条件注释 - 构建工具（如 Vite/webpack）启用 HTML 压缩后自动删掉注释 → 需关闭
removeComments选项 - 写成
<![endif]-->（少叹号）→ 解析失败，整段被当普通文本渲染
document.documentMode 比条件注释更适合运行时判断
条件注释是静态的、页面加载前就决定是否插入资源；而 document.documentMode 是 IE 专属属性，返回当前文档的渲染模式（如 7、8、9），可用于 JS 动态加载 polyfill 或切换行为。
立即学习“前端免费学习笔记（深入）”；
例如表单 required 属性在 IE9 及以下无效，可这样补：
if (document.documentMode && document.documentMode <= 9) {
document.getElementById('myForm').addEventListener('submit', function(e) {
const reqs = this.querySelectorAll('input[required]');
for (let el of reqs) {
if (!el.value.trim()) {
alert('请填写 ' + (el.name || '此项'));
e.preventDefault();
return;
}
}
});
}注意：document.documentMode 在 Edge（Chromium 内核）和非 IE 浏览器中为 undefined，无需额外 UA 判断。
Modernizr 是更通用的特性检测方案
条件注释只能识别 IE，但实际兼容问题常来自功能缺失（如 flexbox、IntersectionObserver、fetch）。Modernizr 通过创建测试元素并检查样式/行为，返回布尔值结果，不依赖浏览器类型。
使用场景：
- 加载
flexbox回退样式（如用float布局） - 对不支持
localStorage的浏览器降级到cookie - 在不支持
canvas的旧设备上显示提示图
示例（Modernizr 3+）：
if (!Modernizr.flexbox) {
document.documentElement.classList.add('no-flexbox');
}
// 然后在 CSS 中：
// .no-flexbox .grid { display: table; }注意：Modernizr 构建时应按需勾选测试项，避免打包过大；不建议全量引入。
别再用 CSS Hack，尤其 \9 和 *html
\9、*html、+html 等 hack 曾用于区分 IE6/7/8，但它们严重破坏可维护性，且在 IE10+ 中大多失效或行为异常。更重要的是：这些 hack 在任何现代 CSS 预处理器（Sass/Less）或构建流程中极易被误删、转义或压缩出错。
真正该做的：
- 用 Autoprefixer 自动加前缀（如
-webkit-），而非手写 - 用
@supports做原生特性检测（如@supports (display: grid)） - 对老 IE 单独输出一份 legacy bundle，并用条件注释引入（仅限仍需支持 IE9 及以下的项目）
如果项目已放弃 IE9 以下支持，<!--[if IE]> 就不该出现在代码里——不是“能不能用”，而是“根本没必要”。
