ie全系（含ie11）完全不解析filter声明，连-ms-filter也仅支持alpha()等极少数旧值；现代filter如blur()、grayscale()一律无效，必须用内联svg滤镜（ie9+）或预处理图片（ie8及以下）替代。
IE全系（含IE11）根本不解析filter声明
不是写法错，也不是漏前缀——IE从4到11，所有版本都把filter当作无效CSS属性直接丢弃。连-ms-filter在IE10+也仅支持alpha()这类极少数旧滤镜，对blur()、grayscale()等现代值完全无视。你查开发者工具的Computed面板，会发现filter根本不出现在列表里。
常见错误现象：.hero { filter: blur(3px); }在IE下毫无反应，但Chrome/Firefox/Safari正常；加-webkit-filter或-ms-filter依然无效；用@supports (filter: blur(0))检测会误判为不支持，但JS检测CSS.supports('filter', 'blur(0)')返回false才是真实结果。
用内联SVG滤镜替代filter实现灰度/模糊/阴影
SVG滤镜是唯一能在IE9+稳定工作的视觉降级方案，关键在于：必须内联定义（不能引用外部SVG文件），且需绑定到具体元素上。
- 灰度效果：在HTML中插入一段内联
<svg></svg>，定义<filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></fecolormatrix></filter>，再用filter: url(#grayscale)调用 - 模糊效果：IE9–11只支持
<fegaussianblur></fegaussianblur>，但必须配合stdDeviation参数（如stdDeviation="2"），且不能和feOffset混用，否则渲染崩溃 - drop-shadow替代：改用
<fedropshadow></fedropshadow>（IE10+支持），但IE9需回退到<feoffset> + <femerge></femerge></feoffset>组合，代码量翻倍
IE8及以下必须放弃动态滤镜，改用预处理资源
IE8连SVG滤镜都不支持，此时任何CSS或JS驱动的实时滤镜都不可行。唯一可靠路径是提前生成视觉等效资源：
- 模糊图：用Photoshop或ImageMagick批量导出
img-blurred.png，CSS中用background-image: url("img-blurred.png")覆盖原图 - 灰度图：避免用
filter: grayscale(1)fallback，直接提供img-grayscale.png，并用background-size: cover保持比例 - 透明遮罩：IE8的
filter: alpha(opacity=30)常导致背景发黑，换成半透明PNG（如mask-30.png）作为background-image更稳
别踩hasLayout和zoom的坑
网上流传“给IE元素加zoom: 1或height: 1px就能让filter生效”，这是过时经验。该技巧仅对IE6–7的alpha()透明度起作用，且前提是页面处于标准模式（）。在IE8+上强行触发<code>hasLayout反而可能破坏盒模型，导致滤镜区域错位或截断。
真正容易被忽略的是：IE下filter（包括alpha）与position: fixed、transform、overflow: hidden共存时，渲染层会被强制合并，造成边缘锯齿或阴影偏移。这种问题无法通过CSS修复，只能删减组合效果或切换fallback方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
