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

谢谢

Answer 1

在您的网站上,此CSS规则阻止box-shadow在IE9中工作:

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

请参阅: IE9上的box-shadow无法使用正确的CSS进行渲染,适用于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/

我个人的观点一般是关于使旧浏览器做他们实际上不能做的事情: 避免它.而是应用渐进增强的原则.还向您的客户解释,使用非标准解决方案解决过时的非标准浏览器的问题非常耗时且可能不值得付出努力.

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

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

可能不完全是你想要的，但是摆弄它或研究DXImageTransform更多。