CSS Box-Shadow在IE中无效

Question

如何让这在IE中工作？

.fancy {
     border: 1px solid black;
     margin: 10px;
     box-shadow: 5px 5px 5px #cccccc;
     -webkit-box-shadow: 5px 5px 5px #cccccc;
     -moz-box-shadow: 5px 5px 5px #cccccc;
}

谢谢

- Daniel Harris

---

IE是什么？9和6有很大的不同。 - iambriansreed

你使用的是哪个版本的IE浏览器？这个例子在IE9和Chrome上可以运行：http://jsfiddle.net/g65kN/ - James Johnson

@Daniel：它们在我的浏览器中显示边框……我认为这个问题只出现在你的浏览器上。 - James Johnson

@Daniel：已发布答案。请尝试我的建议并告诉我是否有所改善。 - James Johnson

@Daniel：更正一下，你提供的链接在IE9中无法使用，这意味着你页面上的某些内容会影响它。在我的Fiddle中，它可以在IE9上运行，所以我怀疑可能与meta部分中的兼容性设置有关。 - James Johnson

Answer 1

在您的网站上，这个CSS规则阻止了box-shadow在IE9中的工作：

table, table td {
    border-collapse: collapse;
}

参见：box-shadow在IE9上不使用正确的CSS进行呈现，但在Firefox和Chrome上可以工作

你必须将border-collapse: separate;添加到不起作用的box-shadow元素上。

因此，这应该为您解决问题：

.fancy {
    border-collapse: separate;
}

- thirtydot

---

现在IE10也遭受了这个问题。可惜微软删除了条件注释。 - GlennG

这太不合理了！太棒了 :D - Kirk Strobeck

该问题曾在https://connect.microsoft.com/IE/feedback/details/770636/ie10-box-shadow-bug-not-rendered-on-tables上报告，并被标记为“不予修复”，因为IE已经停止维护并被Microsoft Edge取代。 - Binyamin

Answer 2

box-shadow自IE9及以上版本开始支持。

有很多网站描述如何在旧版本的IE中实现此功能，其中一个是：http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

还可以查看：http://www.css3.info/preview/box-shadow/

我个人对于使旧浏览器实现它们实际上不能做到的事情的一般性看法是： 避免这样做。而是应用渐进增强的原则。 同时向您的客户解释，用非标准解决方案解决过时、非标准浏览器的问题是非常耗时且可能不值得努力。

- T. Junghans

---

这是我获取代码的地方。我发现他使用的方法不能应用于单个类。 - Daniel Harris

我不太确定你所说的“单一类”是什么意思？ - T. Junghans

IE 8确实是一个“非标准”浏览器，但它并不特别“过时”，尤其是在大多数客户可以接受的范围内。你确实需要支持当前版本（n）和版本n-1。 - Cody Gray

@CodyGray：我同意你的观点。有时候我会有些冲动 :-) 大多数客户都需要支持IE7，甚至在某些地区还需要支持IE6。 - T. Junghans

Answer 3

在IE 9中运行良好。

早期版本不支持box-shadow，但您可以使用滤镜：

zoom: 1;
filter:
  progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
  progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180);

阅读：http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

本文介绍如何在IE7和IE8中模拟CSS3的盒阴影效果，无需使用JavaScript。

- Guffa

---

那你可能做错了什么。或许你启用了兼容模式？ - James Johnson

是的，我已经确定 box-shadow 在 IE11 上可以工作（在我的 Meteor 应用程序中它可以工作），但它在我的 Sharepoint 页面上无法工作。这对我来说很棘手。也许是我在标记中看到的“meta XA-UA-Compatible”或其他行造成的（这不是我自己添加的，也不知道它来自何处）...？ - B. Clay Shannon-B. Crow Raven

@B.ClayShannon：添加该元标记主要有两个原因；一是告诉IE不需要兼容模式，二是告诉IE将页面呈现为旧版本。如果是第一种情况，那么您可以将其更改为指定“edge”（搜索确切的语法），而不是特定版本，这将防止它呈现错误的版本。 - Guffa

@Guffa：但由于这是从母版页“向上级别的命令链”传递而来，因此设置方式就是权力机构想要的方式。我们必须支持许多旧版本的IE（不幸的是）；而IE似乎与Sharepoint最兼容（虽然可以理解，但也很不幸）。 - B. Clay Shannon-B. Crow Raven

@B.ClayShannon：那么你只能编写针对IE版本的代码，该版本由meta标签指定要模拟的IE版本...如果版本号太低，则有些功能根本无法使用。 - Guffa

Answer 4

您还可以使用http://css3pie.com/

PIE使得Internet Explorer 6-9能够渲染一些最有用的CSS3装饰特性。

- stewe

Answer 5

默认情况下，IE会设置IE10兼容模式，应该使用meta标签将其替换为IE9。因此，无论在哪种浏览器上运行，它都将使用与IE9兼容的CSS。因为在IE10兼容模式中，box-shadow CSS属性已从库中删除。

我们可以在head中使用meta标签来更改文档的兼容级别：

<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />

上面的标签表示使该文档与IE8和IE9兼容，对于非IE8和IE9浏览器，将CSS级别切换到IE9。

- Wasif Kirmani

Answer 6

来自谷歌：filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);

可能不完全符合您的要求，但可以尝试调整或更深入地了解DXImageTransform。

- Matthew

Answer 7

在IE中，您需要使用滤镜来实现该效果。

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;

- Sven Bieder

---

对于我来说（IE11），这使整个图像成为一个巨大的阴影。 - B. Clay Shannon-B. Crow Raven

Answer 8

在 CSS 类中添加 display: block; 对我在 IE11 中有效...

- Alireza

Answer 9

对我来说，问题在于IE似乎不喜欢带有8个数字的十六进制颜色（最后两个数字是透明度通道）。我通过从十六进制颜色切换到rgba()颜色来解决了这个问题。

我是偶然发现这个问题的，我很惊讶为什么我还没有看到它被记录在任何地方！

- yellow

Answer 10

我相信这个问题是特定于您的浏览器，因为在jsFiddle上对我来说在IE9和Chrome上都能正常工作。您提供的链接在Chrome中有效，但在IE9中无效。这表明该问题特定于您的实现。

建议您检查是否已禁用兼容性模式，并确保未启用任何可能干扰CSS的设置。另外，建议您在多个浏览器中进行测试，并使用排除法确定原因。

编辑

我刚刚查看了您的标记。请尝试删除此行并查看是否有所不同：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

- James Johnson

---

我想尝试一下；我在我的“查看源代码”中看到了那行，但不知道它是如何出现的。我肯定没有明确添加它。也许它在这个页面派生/使用的某个主页面上。 - B. Clay Shannon-B. Crow Raven