CSS如何实现渐变背景兼容旧版浏览器_采用background-image前缀写法

旧版IE（IE6–IE9）需用filter: progid:DXImageTransform.Microsoft.gradient()模拟线性渐变，颜色须为#AARRGGBB格式，gradientType=0为垂直，且必须置于标准background之后并加zoom: 1触发hasLayout。

旧版IE不支持background: linear-gradient()怎么办

IE9及更早版本完全不识别标准的linear-gradient()语法，直接写会降级为纯色背景。必须用filter属性配合progid:DXImageTransform.Microsoft.gradient实现模拟，这是唯一能在IE6–IE9生效的方案。

filter渐变写法的关键参数和顺序

IE滤镜的渐变方向与CSS标准相反：数值0=顶部开始（等价于to bottom），90=从左开始（等价于to right）。颜色值必须用十六进制带Alpha的#AARRGGBB格式，不支持rgba()或英文色名。

• startColorstr='#FF0088FF'：半透明蓝色，前两位FF是Alpha（00透明，FF不透明）
• endColorstr='#FFFF0000'：不透明红色
• gradientType='0'：0=垂直渐变，1=水平渐变

完整写法示例：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088FF', endColorstr='#FFFF0000', gradientType=0);

现代写法与IE滤镜如何共存不冲突

必须把filter写在标准background声明之后，否则IE会覆盖掉现代浏览器解析出的渐变；同时要加zoom: 1触发IE的hasLayout，否则滤镜可能不渲染。

立即学习“前端免费学习笔记（深入）”；

• 标准写法放前面：background: linear-gradient(to bottom, #0088ff, #ff0000);
• IE滤镜紧接其后：filter: progid:DXImageTransform.Microsoft.gradient(...);
• 补zoom: 1或*zoom: 1（针对IE6/7的hack）

注意：Chrome 19+、Firefox 16+已废弃-webkit-gradient和-moz-linear-gradient等旧前缀，现在只需写标准语法+IEfilter即可。

移动端和Edge早期版本要不要加filter

不需要。iOS Safari 5.1+、Android Browser 4.4+、Edge 12+全部支持标准linear-gradient()。只有明确需要兼容IE6–IE9时才加filter。如果项目已放弃IE9以下支持，filter整段可直接删除——现在绝大多数构建工具（如Autoprefixer）默认也不再输出它。

最容易被忽略的是Alpha通道格式和zoom触发，漏掉任一都会导致IE里渐变完全不显示或变成黑块。