ie9及更早版本完全不支持linear-gradient()语法，因其css引擎未实现css images module level 3规范，只能通过filter: progid:dximagetransform.microsoft.gradient()配合#aarrggbb格式颜色和gradienttype=0/1参数模拟垂直/水平渐变，并需zoom:1触发haslayout。
为什么直接写 linear-gradient() 在老版 IE 里完全不生效
因为 IE9 及更早版本根本不支持 CSS3 渐变语法，连 linear-gradient() 这个函数名都会被忽略。IE10 开始支持标准语法，但 IE10–IE11 需要 -ms- 前缀，而 IE9 只认 filter（基于 DirectX 的旧引擎）。不处理这些，渐变在 IE 里就变成纯色或透明。
filter 写法必须用 HEX 颜色且不能带 alpha
IE9 的 filter: progid:DXImageTransform.Microsoft.gradient(...) 只接受十六进制颜色（如 #ff0000），不支持 rgba()、hsl() 或英文色名。alpha 通道会被直接丢弃，所以想模拟半透效果得靠 PNG 图片回退。
-
startColorstr和endColorstr必须是 8 位 HEX（#AARRGGBB）才能带透明度，但 IE9 实际只解析后 6 位，前两位无效 - 方向参数用
GradientType=0（水平）或1（垂直），不能写to right - 必须配合
zoom: 1或hasLayout: true才能触发渲染
现代写法要按顺序叠加，前缀不是可有可无
浏览器解析 CSS 是从上到下，遇到不认识的声明就跳过。所以标准语法必须放在带前缀的声明之后，否则旧版 WebKit 或 Gecko 会用错版本。
background: -webkit-linear-gradient(left, #f00, #00f); /* Safari 5.1–6.0 */ background: -o-linear-gradient(right, #f00, #00f); /* Opera 11.1–12.0 */ background: -moz-linear-gradient(right, #f00, #00f); /* Firefox 3.6–15 */ background: linear-gradient(to right, #f00, #00f); /* 标准，放最后 */
- Chrome 10–25、Safari 5.1–6.0 用
-webkit-，方向参数是left/top，不是to left - Firefox 3.6–15 用
-moz-，不支持to语法，只能写top、bottom等关键字 - IE10 需要
-ms-linear-gradient()，且必须写单位（如0deg），不能只写90deg
真正兼容的底线：IE9 要么降级为纯色，要么用 PNG
试图用 filter 模拟复杂渐变（比如多停点、径向、角度变化）基本不可行——IE9 的 gradient filter 最多只支持两个颜色端点，且不支持圆角裁剪下的径向效果。实际项目中，更可靠的做法是：
- 对 IE9 及以下，用
@media screen and (min-width:0) and (min-resolution:.001dpcm)这类 hack 单独覆盖背景为纯色或 base64 PNG - 用 Autoprefixer 工具生成前缀时，明确设置
browsers: ["ie >= 9", "last 2 versions"]，避免产出 IE8 不兼容的代码 - 如果设计允许，直接放弃 IE9 支持——现在绝大多数业务已将 IE9–IE11 视为“尽力而为”，重点保障 IE11+ 和现代浏览器
渐变的兼容性陷阱不在写法本身，而在你是否清楚目标用户里还有多少人卡在 IE9。没数据支撑的“全兼容”只是给自己埋坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
