IE6–8不支持text-shadow,需用filter: progid:DXImageTransform.Microsoft.Shadow(Color=#666, Direction=135, Strength=2)模拟,须触发hasLayout且避免与现代属性混写。

IE6–8 里 text-shadow 根本不生效,得换路子
现代 CSS 的 text-shadow 在 IE6–8 完全被忽略,连解析都不解析。想在这些浏览器里模拟出类似效果,唯一可行路径是用 IE 私有滤镜 filter 中的 Shadow。它不是标准属性,但 IE5.5–8 原生支持,且只对文本节点(或有 layout 的块)起作用。
- 必须给元素触发 hasLayout(比如加
zoom: 1或position: relative),否则滤镜无效 -
Shadow滤镜只能设一个方向(Direction)和一个颜色(Color),不能像text-shadow那样多层、模糊、偏移自由组合 - 方向值是角度:0=正右,45=右下,90=正下,135=左下……注意 IE 的 0° 和 CSS 的 0° 方向一致,但不支持负角度
filter: progid:DXImageTransform.Microsoft.Shadow 的写法和限制
这是唯一能用的语法,必须写成完整 progid 形式,不能简写。常见错误是漏掉 progid: 前缀,或把括号写成花括号,或混用英文引号——IE 会直接忽略整条规则。
- 正确写法:
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#666, Direction=135, Strength=2); -
Strength控制“阴影长度”,不是模糊度,数值越大,阴影拉得越长(类似 offset),最大建议不超过 10,否则边缘锯齿极重 - 该滤镜不支持透明色,
Color必须是十六进制(如#000)或命名色(如gray),rgba()会退化为纯黑 - 若同时用了其他滤镜(如
Alpha),要用空格拼接,不能逗号分隔:filter: Alpha(opacity=80) Shadow(Color=#333, Direction=135, Strength=3);
如何安全地让现代浏览器和 IE6–8 各走各的路
不能把 filter 和 text-shadow 写在同一规则里裸奔——IE9+ 会尝试解析 filter 并失败,导致整个样式块失效(尤其当它出现在关键选择器中时)。得靠条件注释或 CSS hack 隔离。
- 推荐用条件注释加载独立 IE 样式表:
<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="ie-fix.css"> <![endif]-->
- 如果必须内联,可用
*filter(IE7 及以下识别)或_filter(仅 IE6)做降级,但注意filter本身在 IE8 也有效,所以更稳妥的是用\9hack:filter: progid:... \9; - 千万别在同一个声明块里混写
text-shadow和filter,哪怕加了!important,IE8 下仍可能因解析错误丢弃后续所有样式
阴影看起来“糊”或“断层”的真实原因
这不是你代码写错了,而是 IE 的 Shadow 滤镜本质是位图叠加:它把文字原图复制一份、按 Direction 平移 Strength 像素、再用指定颜色填充,全程无抗锯齿、无半透明混合。所以你会看到:
立即学习“前端免费学习笔记(深入)”;
- 小字号文字阴影边缘全是硬边马赛克,尤其 Direction=45/135 时最明显
- 如果背景是渐变或图片,阴影区域会“盖住”背景细节,因为它是实色块,不是带 alpha 的投影
- 行高不够时,阴影可能被父容器
overflow: hidden截断——Strength越大,越容易出这事 - 开启 Cleartype 的 IE 下,文字本身渲染更锐利,反而让阴影对比更刺眼;关掉 Cleartype 后阴影略柔和,但正文也变虚——这是系统级权衡,CSS 无解
真要兼顾可读性和视觉接近度,Direction=90 + Strength=1~2 是最稳的选择,别贪多。


















