ie11完全不解析filter声明，必须用内联svg滤镜（如）并以filter: url(#grayscale)调用，且svg须嵌入dom、values需压缩为一行，禁用transform干扰。
IE11根本不认filter: grayscale(1)，不是写法问题
别再试 -ms-filter: grayscale(1) 或 filter: gray 了——IE11 把整个 filter 声明当无效 CSS 直接丢弃，连解析都不解析。你在开发者工具的 Computed 面板里根本看不到它，CSS.supports('filter', 'grayscale(0)') 也稳稳返回 false。这不是漏前缀、不是拼错，是引擎级不支持。
必须用内联 SVG 滤镜，且不能引用外部文件
IE9+ 支持内联 SVG 的 <filter></filter>，但只认 url(#id) 这种同文档引用方式。外部 SVG 文件（如 filter: url("filters.svg#grayscale")）在 IE11 下完全失效。
- 把这段 SVG 插入 HTML 的
顶部或底部（位置无关，但必须在 DOM 中）：<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><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></svg>
- 然后对目标元素加样式：
filter: url(#grayscale) - 注意：
<svg></svg>必须是真实 DOM 节点，不能用 JS 动态插入后才应用样式（IE11 渲染时可能没读到）
全局变灰要覆盖所有图片和 SVG 内容，不能只靠 img
如果想全站变灰（比如哀悼模式），只给 img 加 filter: url(#grayscale) 不够——SVG 图标、CSS background-image、甚至伪元素里的内容都不会被影响。
- 对
html元素本身加滤镜无效（IE 不支持作用于根元素的filter） - 稳妥做法是批量选择：
img, svg, [role="img"], .icon, .logo等关键容器，并确保它们内部没有filter: none覆盖 - 纯色图标建议改用
fill: currentColor+ 父级color: gray控制，比 SVG 滤镜更轻量、更可控 - 背景图？IE11 下只能放弃实时滤镜，换预生成的灰度 PNG，通过
background-image替代
IE11 下 SVG 滤镜的两个硬限制
就算你把 SVG 滤镜写对了，仍可能白忙活——这两个坑几乎必踩：
-
<fecolormatrix></fecolormatrix>的values里不能有空格或换行，必须压成一行（IE11 解析器对空白敏感）；上面示例中已按规范压缩，直接复制可用 - 如果目标元素用了
transform（尤其是translateZ(0)或will-change），IE11 可能跳过滤镜渲染——临时去掉这些声明测试是否恢复
最后提醒：IE11 的 SVG 滤镜只支持 <fecolormatrix></fecolormatrix>、<fegaussianblur></fegaussianblur> 和 <fedropshadow></fedropshadow>（IE10+），别往里塞 <fecomposite></fecomposite> 或复杂链式处理，否则直接不渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
