Question

每个人都知道，在IE中，盒子阴影可以呈现完全不同于Chrome或Firefox（它对我来说难以置信）。我的问题是你如何处理这种情况？因为在某些情况下设计可以完全改变...大多数时候，IE上的盒子阴影比Chrome / Firefox上的薄。是他们的任何java脚本插件，可以自动在IE上增加一点盒子阴影？

Answer 1

.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];

阴影的水平偏移（必需），正数表示阴影位于框的右侧，负偏移表示阴影位于框的左侧。

阴影的垂直偏移（必需），负数表示框阴影位于框上方，正数表示阴影位于框下方。

模糊半径（必需），如果设置为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

Answer 2

我认为你应该牢记这一点：http://dowebsitesneedtolookexactlythesameineverybrowser.com/

澄清一下：您可能想重新考虑每个浏览器中阴影的宽度是否真正重要。它可能没有提供不同的感觉，而小的黑客比如声明除了所需的宽度之外的宽度，因为它似乎是您在特定硬件上的特定操作系统上的特定浏览器中所需的，可能会对您设置的设置产生不良影响。无法测试。

Answer 3

您可以尝试使用CSS3PIE框阴影在IE中工作。

IE中的盒子阴影与chrome不同

3 个答案: