Box-Shadow不显示IE 9-10

时间:2013-07-16 00:49:53

标签: css internet-explorer css3

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

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

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

任何线索?

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

根据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。它是否设置了特定尺寸或某些填充?

答案 2 :(得分:0)

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