热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

防止在InternetExplorer中出现链接阴影-DropshadowpreventinglinksinInternetExplorer

ThewebsiteImdesigninghasafixedmenubehindthebody.Whenthemenuiconisclickedsomejquer

The website I'm designing has a fixed menu behind the body. When the menu icon is clicked some jquery shifts the body left. I've put a shadow on the body to make the fixed menu look like it's positioned underneath. In chrome, firefox, and safari everything works flawlessly. But in Internet Explorer the links in this menu can't be clicked because of the drop shadow coming from the body. Is there an easy fix to this, or a way to easily disable the css on ie?

我正在设计的网站背后有一个固定的菜单。单击菜单图标时,一些jquery将身体向左移动。我在身体上留下了一个阴影,使固定菜单看起来像位于下方。在chrome,firefox和safari中,一切都完美无瑕。但是在Internet Explorer中,由于来自正文的阴影,无法单击此菜单中的链接。是否有一个简单的解决方案,或一种方法轻松禁用ie?

enter image description here

Here's the relevant code:

这是相关的代码:

The shadow on the main content

主要内容的影子

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

The fixed menu that displays when the menu button is clicked.

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

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

This worked: Added a Javascript function to detect Internet Explorer.

这工作:添加了一个Javascript函数来检测Internet Explorer。

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

When the menu is clicked, the index is adjusted on ie to bypass all the other layers. Works well enough.

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

2 个解决方案

#1


1  

hmmm.. a couple things would help; like WHICH version of IE are you seeing this issue on?

嗯...有几件事情会有所帮助;像WHICH版本的IE你看到这个问题?

But, sounds like setting a z-index: to higher on these links could do the trick.

但是,听起来像设置一个z-index:在这些链接上更高可以做到这一点。

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

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

If the above doesn't work alone, try setting a lower z-index to the page wrapper or if that's all you have to work with in this scenario. Eg. z-index: 888; for info on stacking order with z-index check this reference (updated).

如果以上内容不起作用,请尝试将较低的z-index设置为页面包装器或,如果这是您在此方案中必须使用的全部内容。例如。 z-index:888;有关使用z-index的堆叠顺序的信息,请检查此引用(已更新)。

But you'll really need to show us the actual code your using to fully debug this.

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

I'm curious how your writing your box-shadow: you shouldn't have to do more then this (only to outer element you want this effect on, try moving to page wrapper instead of body tag)

我很好奇你如何写你的盒子阴影:你不应该做更多的事情(只有你想要这个效果的外部元素,尝试移动到页面包装而不是身体标记)

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

#2


1  

What is your current CSS for the box-shadow ? have you implemented the correct Microsoft filters by chance?

你当前的盒子阴影是什么?你偶然实现了正确的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;

Just a thought, make sure to include all vendor/browser specifics.

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


推荐阅读
author-avatar
dongtiankzh
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有