0

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

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

我已经尝试过边框折叠解决方案，但对我不起作用。

有什么线索吗？

4

3 回答 3

0

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

于 2013-07-16T03:49:01.943 回答
0

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

于 2013-07-16T01:05:16.043 回答
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 选择的任何元素。它是否设置了特定的尺寸或一些填充？

于 2013-07-16T01:05:35.927 回答