长方体-阴影不显示IE 9-10

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+支持长方体阴影

您在哪些版本中进行了测试？

你能用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，你就会看到它。