CSS Box-Shadow 在 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9949396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Box-Shadow Not Working in IE
提问by Daniel Harris
How would I get this to work in IE?
我如何让它在 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;
}
Thanks
谢谢
回答by thirtydot
On your site, this CSS rule is preventing box-shadowfrom working in IE9:
在您的网站上，此 CSS 规则阻止box-shadow在 IE9 中工作：
table, table td {
border-collapse: collapse;
}
See:box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome
请参阅：IE9 上的 box-shadow 不使用正确的 CSS 呈现，适用于 Firefox、Chrome
You must add
border-collapse: separate;to the element thatbox-shadowis not working on.
您必须添加
border-collapse: separate;到box-shadow不工作的元素。
So, this should fix the problem for you:
因此，这应该可以为您解决问题：
.fancy {
border-collapse: separate;
}
回答by TJ.
box-shadow is supported from IE9 onwards.
从 IE9 开始支持 box-shadow。
There are plenty of sites out there describing how to do this for older IEs. One of them is: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/
有很多网站描述了如何为较旧的 IE 执行此操作。其中之一是：http: //www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/
Also check out: http://www.css3.info/preview/box-shadow/
另请查看：http: //www.css3.info/preview/box-shadow/
My personalopinion in general on making older browsers do things they actually cannot is this: Avoid it. Instead apply the principles of progressive enhancement. Also explain to your client that solving problems of outdated, non standard browsers with non standard solution, is very time consuming and probably not worth the effort.
关于让旧浏览器做他们实际上不能做的事情，我个人的总体看法是： 避免它。而是应用渐进增强的原则。还要向您的客户解释，使用非标准解决方案解决过时的非标准浏览器的问题非常耗时，而且可能不值得付出努力。
回答by Guffa
It works fine in IE 9.
它在 IE 9 中运行良好。
Earlier versions doesn't support box-shadow, but you can use a filter:
早期版本不支持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/
回答by Wasif Kirmani
By default IE was setting up IE10 Compatibility mode which should be replaced with IE 9 using meta-tag. So, whenever it will be running on other browsers then it will use the CSS that will be compatible with IE9. As in IE10 Compatibility mode box-shadow CSS property has been removed from the library
默认情况下，IE 正在设置 IE10 兼容模式，应使用元标记将其替换为 IE 9。因此，每当它在其他浏览器上运行时，它将使用与 IE9 兼容的 CSS。与 IE10 兼容模式一样，box-shadow CSS 属性已从库中删除
We can use meta-tag in head just to change the document compatibility level:
我们可以在 head 中使用 meta-tag 来改变文档兼容级别：
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />
Above tag is showing that make this document compatible with IE8 and IE9 for browsers other than IE8 and IE9 switch CSS level to IE9.
上面的标签表明，使本文档兼容 IE8 和 IE9，对于 IE8 和 IE9 以外的浏览器，将 CSS 级别切换到 IE9。
回答by stewe
You could also use http://css3pie.com/
你也可以使用http://css3pie.com/
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
PIE 使 Internet Explorer 6-9 能够呈现几个最有用的 CSS3 装饰功能。
回答by Matthew
From google: filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);
来自谷歌： filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);
Probably not exactly as you want it, but fiddle around with it or look into DXImageTransformsome more.
可能并不完全如您所愿，但可以摆弄它或研究DXImageTransform更多。
回答by Sven Bieder
On IE you need to use filter for that effect.
在 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;
回答by James Johnson
I believe this issue is specific to your browser, because it works for me in this jsFiddleon both IE9 & Chrome. The link you provided works in Chrome, but not in IE9. This would indicate that the issue is specific to your implementation.
我相信这个问题特定于您的浏览器，因为它在IE9 和 Chrome 上的jsFiddle 中对我有用。您提供的链接在 Chrome 中有效，但在 IE9 中无效。这表明该问题特定于您的实施。
I would check to make sure that compatibility mode is disabled, and also make sure you don't have any settings enabled that would interfere with CSS. I would also suggest testing this in multiple browsers and using process of elimination to determine why it isn't working.
我会检查以确保禁用兼容模式，并确保您没有启用任何会干扰 CSS 的设置。我还建议在多个浏览器中对此进行测试，并使用消除过程来确定它为什么不起作用。
EDIT
编辑
I was just looking at your markup. Try removing this line and see if it makes a difference:
我只是在看你的标记。尝试删除此行，看看它是否有所作为：
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
回答by Soul Eeater
It's already 2018, happens the same with IE11. Sometimes the box-shadowdoesn't work, but sometimes it does.
已经是 2018 年了，IE11 也是如此。有时box-shadow不起作用，但有时它起作用。
I tried this with IE11 and IE10: Try changing the displayof the element where you want to add the shadow (usually "display: block"works fine):
我在 IE11 和 IE10 上尝试过：尝试更改要添加阴影的元素的显示（通常“显示：块”工作正常）：
.fancy {
display: block;
border: 1px solid black;
margin: 10px;
box-shadow: 5px 5px 5px #ccc;
}
回答by Alireza
Adding display: block;to CSS class works for me in IE11...
display: block;在IE11 中添加到 CSS 类对我有用......
