Question

我有一个复杂的子菜单，我想要应用盒子阴影效果。

http://flytango.com.ar/test/test-lidherma.html

向下滚动菜单

适用于Firefox，Chrome，Safari等，但不适用于任何版本的Internet Explorer

CSS

.grey ul.mega-menu li .sub-container {
position: absolute;
padding-left: 20px;
margin-left: 0px;
margin-top:2px;
-moz-box-shadow: 0 2px 5px #CCC;
-webkit-box-shadow: 0 2px 5px #CCC;
box-shadow: 0 2px 5px #CCC;
}

我尝试过边界崩溃解决方案，但对我不起作用。

任何线索？

Answer 1

清除浏览器缓存，它适用于IE9 +。我亲自测试过。

Answer 2

根据http://caniuse.com/#search=box-shadow，IE9 +

支持box-shadow

您测试了哪些版本？

您可以在jsfiddle.net上发布测试用例的简化版吗？

这是我做的简化版本，阴影确实显示（在IE10中查看）： http://jsfiddle.net/GvehV/1/

<ul>
 <li>test</li>
</ul>

li {
position: absolute;
font-size: 18px;
padding-left: 20px;
margin-left: 20px;
margin-top: 20px;
-moz-box-shadow: 0 2px 5px #CCC;
-webkit-box-shadow: 0 2px 5px #CCC;
box-shadow: 0 2px 5px #CCC;
}

我假设您需要将问题缩小到您选择的任何元素.sub-container。它是否设置了特定尺寸或某些填充？

Answer 3

就在那里，你只是看不到它，因为模糊被设置为0.尝试box-sizing: 0 2px 5px 2px #ccc你会看到它。

Box-Shadow不显示IE 9-10

3 个答案: