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;
}

由于

Answer 1

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

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

请参阅： box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome

您必须将border-collapse: separate;添加到box-shadow的元素中没有工作。

所以，这应该可以解决你的问题：

.fancy {
    border-collapse: separate;
}

Answer 2

从IE9开始支持

box-shadow。

有很多网站描述了如何为旧版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/

我的个人一般关于使旧版浏览器执行实际上不能做的事情是这样的：避免。而是应用progressive enhancement的原则。还要向您的客户解释，使用非标准解决方案解决过时的非标准浏览器的问题非常耗时且可能不值得付出努力。

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/

Answer 4

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

PIE使Internet Explorer 6-9能够呈现几个最有用的CSS3装饰功能。

Answer 5

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

可能不完全符合您的要求，但可以随意使用它或者再查看DXImageTransform。

Answer 6

在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;

Answer 7

默认情况下，IE正在设置IE10兼容模式，应使用meta-tag替换为IE 9。因此，只要它将在其他浏览器上运行，那么它将使用与IE9兼容的CSS。与在IE10兼容模式中一样，box-shadow CSS属性已从库中删除

我们可以在头部使用元标记来改变文档兼容性级别：

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

上面的标签显示，使该文件与IE8和IE9以外的浏览器兼容IE8和IE9以外的浏览器将CSS级别切换为IE9。

Answer 8

我认为这个问题是针对您的浏览器的，因为它适用于IE9＆amp ;; jsFiddle铬。您提供的链接适用于Chrome，但不适用于IE9。这表明该问题特定于您的实施。

我会检查以确保禁用兼容模式，并确保您没有启用会干扰CSS的任何设置。我还建议在多个浏览器中测试它，并使用消除过程来确定它不起作用的原因。

修改

我只是看着你的标记。尝试删除此行，看看它是否有所作为：

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

Answer 9

已经是2018年，IE11也是如此。有时 box-shadow 不起作用，但有时却起作用。

我尝试使用IE11和IE10进行此操作：尝试更改要在其中添加阴影的元素的显示（通常“ display：block” 可以正常工作）：

.fancy {
  display: block;
  border: 1px solid black;
  margin: 10px;
  box-shadow: 5px 5px 5px #ccc;
}

Answer 10

在我的 IE11 ...

中为CSS类添加display: block;

Answer 11

对我来说，问题在于IE似乎不喜欢使用8位数字的十六进制颜色（最后两个用于alpha通道）。我通过从十六进制颜色切换为rgba（）颜色解决了这个问题。

我偶然发现了这个，我感到惊讶的是我还没有在任何地方看到它！

Answer 12

媒体查询是当今设置IE特定样式的最优雅，最实用的方法。尽管它们不是最漂亮的，但即使不使用过滤器甚至是JS，它的工作也很可靠。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

有关更多详细信息，请参见：https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

CSS Box-Shadow在IE中不起作用

12 个答案: