如何处理CSS box-shadow阴影在IE8中的兼容显示

PIE.htc是IE8下实现box-shadow的唯一稳定方案，因filter:Shadow在Win10已失效；需确保路径正确、元素设position:relative、z-index及纯色背景，并解决父容器浮动塌陷问题。

IE8 不支持 box-shadow，直接写不会渲染任何阴影。必须用兼容方案补全，否则视觉降级严重。

为什么 filter: progid:DXImageTransform.Microsoft.Shadow 不推荐用了

这个 IE 专属滤镜在 Win10 系统（2020 年后更新）已彻底失效，即使 IE8 浏览器进程还在运行，filter 也常被忽略或渲染异常。实测多数新装 Win10 + IE8 模拟环境里，filter 完全不生效，且容易引发文字模糊、z-index 错乱等问题。

• 仅适用于老旧 XP/Win7 环境下的真实 IE8
• 要求元素必须是 display: block 或 inline-block，display: inline 无效
• Direction 值需为整数（如 135），负值虽语法合法但部分版本解析失败
• 无法叠加多个阴影，不支持 inset 内阴影

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

PIE（Progressive Internet Explorer）通过 VML 动态绘制阴影和圆角，在 IE6–8 中实测兼容性最可靠。但它不是“开箱即用”，路径、定位、z-index 都要严格满足条件。

• behavior: url(PIE.htc) 的路径必须相对于 HTML 文件，不是 CSS 文件——比如 HTML 在 /index.html，PIE.htc 就得放在同级目录，写成 behavior: url(PIE.htc)；若 HTML 在子目录，就得写成 behavior: 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 拒绝执行）。