CSS如何实现渐变背景兼容旧版浏览器_使用background-image前缀写法-css教程-PHP中文网

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

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

旧版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，否则滤镜可能不渲染。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

标准写法放前面：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里渐变完全不显示或变成黑块。