CSS box-shadow在IE8中的兼容显示方法

聊到 IE8 浏览器下 box-shadow 阴影兼容性处理，主流方案无非两个：一个是微软自带的滤镜 filter: progid:DXImageTransform.Microsoft.Shadow，另一个是第三方工具 PIE.htc。但实际项目中，前者在 Windows 10 环境下基本失效，后者虽然能实现兼容，但需要严格配置。下面梳理关键细节，避免上线后出现意外。

IE8 本身不支持 CSS3 的 box-shadow 属性，直接使用该属性不会显示任何阴影。如果用户还在使用 IE8，视觉降级会非常明显，必须借助兼容方案补全阴影效果。

为什么 filter: progid:DXImageTransform.Microsoft.Shadow 不推荐继续使用

这个 IE 专属滤镜在 Windows 10 系统（尤其是 2020 年之后的更新）中已经彻底失效。即使通过兼容模式模拟 IE8 浏览器进程，filter 也经常被忽略或渲染异常。实际测试表明，大多数新安装的 Windows 10 + IE8 模拟环境里，filter 完全不生效，并且容易引发文字模糊、z-index 错乱等问题。

• 只适用于老旧 XP/Win7 环境下的真实 IE8
• 目标元素必须设置 display: block 或 display: inline-block，inline 无效
• Direction 值必须传整数（例如 135），负值虽然语法合法，但部分版本解析会失败
• 无法叠加多个阴影，也不支持 inset 内阴影

PIE.htc 是目前唯一稳定可行的方案

PIE（Progressive Internet Explorer）通过 VML 动态绘制阴影和圆角，在 IE6 到 IE8 中实测兼容性最可靠。但它不是“开箱即用”——路径、定位、z-index 都必须严格满足条件，缺一个都可能静默失效。

• beha vior: url(PIE.htc) 的路径基准是 HTML 文件所在目录，不是 CSS 文件。举例：如果 HTML 在 /index.html，PIE.htc 必须放在同级目录，写成 beha vior: url(PIE.htc)；如果 HTML 在子目录，就要写成 beha vior: url(../PIE.htc)
• 目标元素必须有 position: relative 或 position: absolute，否则 PIE 不会触发渲染
• 必须显式设置 z-index（哪怕只是 z-index: 1），否则阴影可能被其他元素遮挡
• 背景色不能透明——如果用 rgba() 或者不设背景色，IE8 下阴影区域会变黑甚至直接消失。建议显式声明 background-color: #fff 这类纯色

box-shadow 与浮动容器共存时阴影消失？先检查高度

这个问题不限于 IE8，但很容易被误判为兼容问题。box-shadow 作用于元素自身的盒模型，如果父容器因为浮动塌陷导致高度为 0，阴影自然不可见——PIE.htc 同样受此影响。

• 优先检查父容器是否用 overflow: hidden 或 overflow: auto 来闭合浮动
• 避免直接用 height 或 min-height 强行设置高度，这会掩盖真正的塌陷问题
• PIE 渲染依赖 DOM 尺寸计算，如果父容器高度没有正确撑开，PIE 画出的阴影位置会偏移甚至完全不出现

真正容易被忽略的一点是：PIE.htc 加载失败时 IE8 不报错，只静默失效。上线前务必用 F12 开发者工具 → “网络”标签页确认 PIE.htc 返回 200，并且响应头的 Content-Type 是 text/x-component（如果使用 IIS，需要手动配置 MIME 类型，否则 IE8 会拒绝执行）。这一步虽然繁琐，但能让兼容方案真正落地。