谈到 IE8 环境下 box-shadow 的兼容性，通常会涉及两种主流方案：其一是微软自带的滤镜 filter: Shadow，其二是第三方工具 PIE.htc。然而，前者在 Windows 10 系统中基本已无法正常使用，后者虽然可行，但必须做好完整的配置。下面我们将详细拆解关键细节，避免上线后出现问题。
IE8 本身不支持 box-shadow 属性，直接编写该样式不会产生任何阴影效果。如果仍有用户使用 IE8，视觉上的降级将非常明显——必须借助兼容方案来补全阴影效果。
为何微软滤镜 filter: progid:DXImageTransform.Microsoft.Shadow 已不再推荐使用
这款 IE 专属滤镜在 Windows 10 系统（尤其是 2020 年之后的更新版本）中已完全失效。即便通过兼容模式让 IE8 浏览器进程运行，filter 也经常被忽略或出现渲染异常。实测显示，在大多数新安装的 Win10 + IE8 模拟环境中，filter 根本不起作用，还容易引发文字模糊、z-index 层级错乱等问题。
- 仅适用于老旧 XP/Win7 环境下的真实 IE8 浏览器
- 目标元素必须设置为
display: block或inline-block，inline无效 Direction参数必须传入整数（如 135），负值虽语法合法，但部分版本在解析时会失败- 无法叠加多个阴影，也不支持
inset内阴影效果
PIE.htc：目前最可靠的 IE8 box-shadow 兼容方案
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 会拒绝执行该文件）。这一步骤虽然繁琐，却能确保兼容方案真正落地生效。
