每个人都知道盒子阴影在 IE 中的渲染与在 chrome 或 Firefox 中的渲染完全不同（这对我来说是难以置信的）。我的问题是你如何处理这种情况？因为在某些情况下设计可以完全改变......大多数时候IE上的盒子阴影比Chrome / Firefox上的要薄。他们是否有任何可以在 IE 上自动增加一点盒子阴影的 java-script 插件？
【问题讨论】：
box-shadow 已有一段时间了。到底有什么不同？
标签： javascript css google-chrome internet-explorer
我认为你应该记住这一点：http://dowebsitesneedtolookexactlythesameineverybrowser.com/
澄清一下：您可能需要重新考虑在每个浏览器中阴影的宽度完全相同是否真的那么重要。它可能不会提供那种不同的感觉，而一些小技巧，比如声明一个不同于所需宽度的宽度，因为它似乎是您在特定硬件上特定操作系统上的特定浏览器中想要的，可能会对您的设置产生不良影响无法测试。
【讨论】：
.shadow {
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
那就是：
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
阴影的水平偏移量（必填），正数表示阴影在盒子的右边，负数表示阴影在盒子的左边。
阴影的垂直偏移量（必需），负数表示 box-shadow 将在 box 上方，正数表示阴影将在 box 下方。
模糊半径（必需），如果设置为0，阴影会很锐利，数字越大，越模糊，阴影会延伸得越远。例如，水平偏移为 5px 且模糊半径为 5px 的阴影将是总阴影的 10px。
散布半径（可选），正值增加阴影的大小，负值减小大小。默认为 0（阴影与模糊大小相同）。
颜色（必需）- 采用任何颜色值，例如 hex、named、rgba 或 hsla。如果省略颜色值，则以前景色（文本颜色）绘制框阴影。但请注意，旧版 WebKit 浏览器（Chrome 20 和 Safari 6 之前）在省略颜色时会忽略该规则。
使用像 rgba(0, 0, 0, 0.4) 这样的半透明颜色是最常见的，并且效果很好，因为它不会完全/不透明地覆盖它的结束，但允许下面的内容通过有点，像一个真正的影子。
Internet Explorer（8 及以下）Box Shadow
你需要一个额外的元素，但它可以通过过滤器实现。
<div class="shadow1">
<div class="content">
Box-shadowed element
</div>
</div>
.shadow1 {
margin: 40px;
background-color: rgb(68,68,68); /* Needed for IEs */
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
.shadow1 .content {
position: relative; /* This protects the inner element from being blurred */
padding: 100px;
background-color: #DDD;
}
来源：css-tricks
【讨论】：
您可以尝试CSS3PIE 让盒子阴影在 IE 中工作。
【讨论】：