条件注释是为低版本ie（ie6–ie8）精准加载补丁css最稳定的方式，仅ie识别、其他浏览器忽略；必须硬编码在html 中，如 ，且需配合html5shiv、normalize.css及语法降级方案。
低版本 IE（尤其是 IE6–IE8）对 CSS 的解析能力弱、标准支持差，直接写现代 CSS 很容易失效或错乱。关键不是“能不能加样式”，而是“加了之后浏览器认不认、怎么认、认错怎么办”。
用条件注释精准加载对应 CSS 文件
这是最稳定、最可控的方式，只在目标 IE 版本中加载特定样式表，避免干扰其他浏览器。
- 条件注释仅被 IE 识别，其他浏览器完全忽略，无兼容风险
- 必须放在
中，且在<link>标签之前或之后都可，但不能嵌套在 JS 里动态插入（否则页面会闪动） - 常见写法：
<!--[if lt IE 9]><link rel="stylesheet" href="ie8-and-down.css"><![endif]-->；<!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]--> - 注意：
lt表示“小于”，lte是“小于等于”，gte是“大于等于”，别写反
避免依赖 CSS3 特性，优先用降级方案
像 border-radius、box-shadow、linear-gradient 这类属性，在 IE9 以下根本无效，硬写只会留白或出错。
- 不要指望 autoprefixer 能解决 IE8 及以下的问题——它只加前缀，不补功能
- 对圆角：IE8 及以下可用背景图或 PNG 边框切片替代，而不是留白或强行用滤镜
- 对阴影：可用
filter: progid:DXImageTransform.Microsoft.Shadow（仅 IE5.5–IE8），但性能差、易出错，建议只用于非关键元素 - 对渐变：IE10+ 支持
linear-gradient，IE9 可用filter: progid:DXImageTransform.Microsoft.gradient，IE8 及以下基本放弃，用纯色 fallback
慎用 CSS Hack，优先走特性检测 + 动态加载
CSS Hack（如 *property、\0）看似方便，但维护成本高、易误伤、在 IE10+ 已逐步失效。
-
*display: inline只对 IE6/7 生效，但一旦项目升级到 IE8+ 就变成冗余甚至冲突规则 - 更可靠的做法是用 JS 检测能力，再加载补丁样式：
if (!('borderRadius' in document.documentElement.style)) { loadCSS('no-border-radius.css'); } - 或者用 Modernizr 这类库做细粒度判断，比 UA 字符串匹配更准确（UA 可伪造，API 是否存在不可伪造）
- 特别注意：IE8 不支持
@media查询，所以响应式布局必须靠respond.js或服务端判断，不能只靠 CSS
必须搭配 html5shiv 和 Normalize.css
没有这两样，连基础结构都可能崩掉——不是样式错，而是标签根本不被识别。
-
html5shiv让 IE8 及以下能识别<header></header>、<section></section>等 HTML5 标签，否则这些元素无法设置样式或绑定事件 -
Normalize.css比 reset 更合理，它保留有用的默认样式（如<strong></strong>加粗），同时抹平 IE 和现代浏览器在表单、列表、标题上的默认差异 - 顺序很重要：先引入
html5shiv，再引入Normalize.css，最后才是业务 CSS，否则 IE 下的 normalize 规则可能不生效 - 别用
* { margin: 0; padding: 0; }替代 normalize——它会破坏表单控件默认间距和可访问性
真正难的不是写几个 hack 或加几行条件注释，而是判断哪些样式必须保、哪些可以舍、哪些能用 JS 补。IE 兼容不是“让所有东西看起来一样”，而是“让核心功能可用、关键信息可读、交互不崩溃”。一旦开始为 IE6 写代码，就要接受它不会支持 Flexbox、不会理解 calc()、也不会渲染伪元素动画——这不是 bug，是边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
