Question

我设计的网站背后有一个固定的菜单。当点击菜单图标时，一些jquery将身体向左移动。我在身体上留下了一个阴影，使固定的菜单看起来像位于下面。在chrome，firefox和safari中，一切都完美无瑕。但是在Internet Explorer中，由于来自身体的阴影，因此无法单击此菜单中的链接。有没有一个简单的解决方法，或者一种方法可以轻松地禁用css？

enter image description here

以下是相关代码：

主要内容的影子

.wrapper {
-webkit-box-shadow: 3px 0px 10px 1px rgba(0,0,0,1);
-moz-box-shadow: 3px 0px 10px 1px rgba(0,0,0,1);
box-shadow: 3px 0px 10px 1px rgba(0,0,0,1);
}

单击菜单按钮时显示的固定菜单。

.sidemenu {
position: fixed;
right: 0px;
top: 0px;
width: 260px;
height: 100%;
background: #2b2b2b;
z-index: -10;
overflow: hidden;
transition: 0.2s;
color: white;
text-align: center;
}

这有效： 添加了一个javascript函数来检测Internet Explorer。

if (detectIE() != false) {
    $('.sidemenu').css('zIndex', '1000');
}

单击菜单时，将调整索引，即绕过所有其他图层。效果很好。

Answer 1

box-shadow的当前CSS是什么？您是否偶然实现了正确的Microsoft过滤器？

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;

只是想一想，确保包括所有供应商/浏览器细节。

Answer 2

嗯......有几件事情会有所帮助;喜欢IE的 WHICH 版本你是否看到了这个问题？

但是，听起来好像在这些链接上设置z-index:更高可以解决问题。

.menu { 
  position: relative; // works best if parent is set to relative
}

.menu li a { 
   // all it's styles
   z-index: 1001; //add
}

如果以上内容无法单独使用，请尝试将较低的z-index设置为页面包装器，或<body>，如果您在此方案中必须使用的话。有关使用z-index堆叠订单的信息，请Eg. z-index: 888;检查此reference (updated)。

但是您真的需要向我们展示您用来完全调试它的实际代码。

我很好奇你的写作box-shadow:你不应该多做这个（只有你想要这个效果的外部元素，请尝试移动到页面包装器身体标签）

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

防止在Internet Explorer中出现链接阴影

2 个答案: