box-shadow兼容性处理：让阴影在老浏览器中也能显示

做网页时加个 box-shadow 让元素有立体感，挺常见的。但一碰上老版本IE，比如IE8、IE9，这效果直接就没了，页面看起来干巴巴的，用户一眼就觉得“这网站是不是没做完”。

问题出在哪？

box-shadow 是CSS3属性，IE9才开始支持，而且只支持部分写法。IE8及以下压根不认识这个属性。所以你在现代浏览器里调得再好看，一到这些老环境，阴影直接“隐身”。

怎么让老浏览器也看到阴影？

最直接的办法是用图片替代。准备一张带阴影的PNG图，作为背景贴在元素后面。虽然不够灵活，但兼容性稳稳的。

<div class="shadow-box">内容区域</div>

.shadow-box {
  background: url(shadow.png) no-repeat bottom right;
  padding: 10px;
}

试试IE专属滤镜

IE有个私有属性叫 filter，可以用它模拟阴影效果。比如用 dropshadow 或者 progid:DXImageTransform.Microsoft.Shadow。

.box {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* 针对IE9 */
.box {
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=3);
}

注意，filter 只能在IE下生效，其他浏览器会忽略。Strength 对应阴影模糊程度，Direction 是方向角度，调的时候得一点点试。

条件注释区分浏览器

想精准控制哪些浏览器加载哪些样式，可以用HTML条件注释。

<!--[if IE 8]>
<style>
.box { filter: progid:DXImageTransform.Microsoft.Shadow(color='#666', Direction=135, Strength=2); }
</style>
<![endif]-->

这样只有IE8会加载这段样式，不影响其他浏览器。

现代项目建议

现在大多数用户都用现代浏览器，如果非要兼容IE8/9，可以考虑降级处理——没有阴影也没关系，至少功能正常。毕竟为了1%的用户花30%的开发时间，不划算。

但如果客户明确要求“必须和设计稿一模一样”，那就得动手填坑了。用 filter + 条件注释，或者干脆切图加背景，哪个快用哪个。

别忘了测试

改完代码别急着提交，找个虚拟机跑一下IE8，看看阴影出没出来。有时候 filter 会让文字发虚，或者位置偏移，得手动微调。

实际项目中，曾遇到过一个弹窗在IE8下阴影错位的问题，最后发现是父元素设置了 position: relative 导致 filter 定位异常。去掉后就好了。这种坑，只能靠踩过才知道。