热门标签 | 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.

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


推荐阅读
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • 随着前端技术的发展,越来越多的开发者开始使用react、vue等web框架,但很少有人深入理解这些框架的源码。然而,这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说,可能会认为javascript很容易上手,但实际上只是因为它被高度封装了。与能够使用封装类的人相比,能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码,探寻框架底层的原理,帮助读者更好地理解web框架的运行机制。 ... [详细]
  • jQuery实现简单的动画效果及用法详解
    本文详细介绍了使用jQuery实现简单动画效果的方法,包括显示/隐藏、向上收缩/向下展开、淡入/淡出、自定义动画等。同时提供了具体的用法示例,并解释了参数的含义和使用技巧。通过本文的学习,读者可以掌握如何使用jQuery实现各种动画效果,为网页增添生动和互动性。 ... [详细]
  • 获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法
    本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法,包括使用jQuery的选择器和遍历方法。通过这些方法,可以方便地获取到所需的元素,并进行相应的操作。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • jQuery :nthchild前有无空格的区别
    :nth-child(index)子元素过滤选择器的描述是:选取每个父元素下的弟index个子元素,index从1开始。然后,我写了如下h ... [详细]
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社区 版权所有