开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

css层遮挡ie链接失效

CSS层遮挡IE链接失效问题

基础概念

CSS层遮挡问题通常涉及到元素的z-index属性。z-index属性用于指定元素的堆叠顺序，数值越大，元素越靠上。在IE浏览器中，特别是IE6和IE7，存在一些与z-index相关的问题，可能导致链接被遮挡而失效。

相关优势

灵活性：通过调整z-index，可以灵活地控制元素的堆叠顺序，实现复杂的布局效果。
兼容性：虽然IE浏览器存在一些问题，但通过适当的处理，可以实现较好的跨浏览器兼容性。

类型

父子关系：如果一个元素是另一个元素的子元素，那么子元素的z-index不会超过父元素的z-index。
定位元素：只有定位元素（position属性为relative、absolute或fixed）才能使用z-index。

应用场景

弹出层：在弹出层设计中，通过设置较高的z-index，可以确保弹出层显示在最上层。
导航菜单：在复杂的导航菜单中，通过调整z-index，可以确保菜单项不会被其他内容遮挡。

问题原因

在IE浏览器中，特别是IE6和IE7，存在以下问题：

父容器z-index影响子元素：如果父容器的z-index较低，子元素的z-index再高也无法超过父容器。
窗口层问题：IE浏览器会将某些元素视为窗口层，导致这些元素的z-index无法超过窗口层。

解决方法

确保父容器的z-index足够高：
确保父容器的z-index足够高：
使用IE特有的z-index修复：
使用IE特有的z-index修复：
避免使用窗口层元素：尽量避免将链接放在可能被视为窗口层的元素中。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Layer Overlay</title>
    <style>
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        .content {
            position: relative;
            z-index: 2000;
            padding: 20px;
            background: white;
        }
    </style>
</head>
<body>
    <div class="overlay"></div>
    <div class="content">
        <a href="#">Click Me</a>
    </div>
</body>
</html>

参考链接

通过以上方法，可以有效解决IE浏览器中CSS层遮挡链接失效的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS: IE中的BUG之margin-bottom失效

受影响的浏览器 IE6, IE7 4. 原因暂不知道 5. 解决方法 a. 取消元素的margin-bottom, 改为指定父元素的padding-bottom(推荐); b....clear:both;} 6. example /* 使用是第1种方法 */ xhtml: example 1 example 2 css

1.2K10 0

CSS设置DIV Herf底层图片和链接同时改变,兼容IE，Firefox,Opera,Safari,Chrome等

/*CSS樣式設置塗聚文 Geovin Du**/ .text8 { font-family: Arial, Helvetica, sans-serif; background-image...1999/xhtml"> 塗聚文,CSS...设置DIV Herf底层图片和链接同时改变 css.../Css.css" rel="stylesheet" type="text/css" /> <a href="http://geovindu.blog.163

1821 0

第141天：前端开发中浏览器兼容性问题总结（二）

IE6两个层之间3px的问题问题：左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距解决： 1、右边层也采用浮动 float 2、左边层添加属性 margin-right...IE6 列表背景颜色失效的问题问题：当父元素设置position:relative;时，在ie6中第一个ul、ol、dl的背景颜色失效解决： ul、ol、dl 都设置为position:relative...超链接访问过后hover样式不出现的问题问题：点击超链接后，hover、active样式没有效果解决：改变CSS属性的排列顺序: L-V-H-A 34. ...去除链接虚线边框的问题问题：当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框解决： ie6/7中设置为a {blr:expression_r(this.onFocus...IE6背景闪烁的问题问题：链接、按钮用CSS sprites作为背景，在ie6下会有背景图闪烁的现象。

3.2K2 1

CSS-项目中遇到IE兼容问题，处理随笔

二、ie6下absolute定位BUG，top，left等方位没用的解决方法: (1):给父元素（有relative的父元素）添加*zoom:1；触发layout层解决问题。...2017-04-28 13:59:05 ie总是能愁死我一个动画效果，想要去掉jq的代码，用css3的trasition来写，但是ie不支持css3的，尤其是动画，那么问题是怎么让ie支持css3动画呢...同样，子元素也会用到一个必要的属性：z-index——用来设定在所有浮动元素中的高低层级、以及比不浮动的元素要高一点以达到遮挡的效果。我按常理出牌设置css，但是ie他不按常理出牌啊！...这是我ff中的正常效果但到了ie中就成了这样： ? 浮动的白框，被下边正常文档流中的banner图给遮挡了！ exceme me！！ ?...【补充说明：也不是所有用了relative的都要加这个，但是即使加了，用不到的还是不会被他影响，所以傻瓜机似得，可以都加上，单位了代码优化，一般是指在需要浮动起来后，被下边的层遮挡了的情况，而这种情况多发生在溢出父元素并与其父元素下边的盒模型发生叠加效应时

2.6K7 0

前端面试三新的一周

CSS的盒模型？...标签选择符类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级高 7.前端页面有哪三层构成，分别是什么？作用是什么？...结构层 Html 表示层 CSS 行为层 js 29.css的基本语句构成是？选择器 8.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?...Ie(Ie内核) 火狐（Gecko）谷歌（webkit） opear(Presto) 9.写出几种IE6 BUG的解决方法？...1.双边距BUG float引起的使用display 2.3像素问题使用float引起的使用dislpay:inline -3px 3.超链接hover 点击后失效使用正确的书写顺序 link visited

1.4K0 0

HTML+CSS高级

第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边 ...页面中可能所有元素都要加上浮动，margin左右自动失效 2.3 给父级加上 display: inline-block --》将导致margin失效 ...解决办法：设置背景fixed 1.14 IE7以及以下a标签右浮动时，错位到下一行解决办法：css hack，利用css hack *margin-x...页面中可能所有元素都要加上浮动，margin左右自动失效 2.3 给父级加上 display: inline-block --》将导致margin失效 ...解决办法：设置背景fixed 1.14 IE7以及以下a标签右浮动时，错位到下一行解决办法：css hack，利用css hack *margin-x

7.9K6 1

常见的前端面试题，总有一点让你涨知识

CSS的盒模型?...标签选择符类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级高 7.前端页面有哪三层构成，分别是什么?作用是什么?...结构层 Html 表示层 CSS 行为层 js 8.css的基本语句构成是? 选择器 9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?...Ie(Ie内核) 火狐（Gecko）谷歌（webkit） opear(Presto) 10.写出几种IE6 BUG的解决方法 1.双边距BUG float引起的使用display 2.3像素问题使用...float引起的使用dislpay:inline -3px 3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active 4.Ie z-index问题给父级添加

1.4K7 0

【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏

1.如何实现放大镜效果思维整理：1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能2.黄色的遮挡层跟随鼠标功能。3.移动黄色遮挡层,大图片跟随移动功能。html，css代码遮挡层 --> 遮挡层一个鼠标在盒子内移动的坐标...yel.offsetHeight; } yel.style.left = yelX + 'px'; yel.style.top = yelY + 'px'; // 遮挡层移动距离...=大图片最大移动距离/遮挡层的最大移动距离 // 1.求出遮挡层的最大移动距离 var yelMaxx = one.offsetWidth - yel.offsetWidth

1.5K1 0

前端开发面试题总结之——CSS3

题目&答案如何理解CSS的盒子模型？每个HTML元素都是长方形盒子。（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。...（6）超链接访问过后hover样式就不出现了被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序： L-V-H-A : a:link {} a:visited...body{-webkit-text-size-adjust:none} 前端页面有哪三层构成，分别是什么？作用是什么？最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。...网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。...clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效。

1.5K4 0

JS魔法堂：Data URI Scheme介绍

DATA URI Scheme的作用，一般就是将经过Base64编码的数据嵌入网页中，从而减少请求资源的链接数。...减少资源请求链接数。缺点：　　①. 不会被浏览器缓存起来；　　②. 移动端性能比http URI scheme低。...不支持　　IE567 八、标签支持　　　　　　　　　　　　　　　　　　　　　　　　　　　　嵌入图片的object、img、input[type=image]、script、link和css规则中的...在使用IE8兼容模式时能认识*这个css hack，但却不支持mhtml，所以会导致背景图片失效。...它使用了 SSL （安全套接字层）或 PCT（保密通讯技术）这样的安全协议来确保您所收发信息的安全性。当站点使用安全协议时，您提供的信息例如姓名或信用卡号码等都经过加密，其他人无法读取。

3.1K7 0

如何在网页置灰的时候，部分元素保持彩色-有意思的面试题

网页置灰方案讨论如何在网页置灰的前提下，保持部分元素彩色在线体验本文视频版链接最近哀悼日，网页端如何一键变灰已经有很多实现方式了，但是我看到一个推文很有意思，是一个不错的面试题现在网页置灰已经不仅仅是一行...ie之类的兼容性的话，就直接把兼容性的属性都搞上去html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter...100%的算法如下, 我本人图像处理方面比较菜，但是看起来全灰的算法不可逆，而且如果在元素上再盖一个canvas也不太好弄放弃R/G/B = 0.2126R' + 0.7152G' + 0.0722'B遮挡解决方案...node.children[i]; walk(child) } }可以把selectors做成从后端读取，就可以动态设置保持彩色的部分了, 不过这样设置filter可能会导致部分元素的定位失效...，不过作为面试题的追问还不错图片总结作为面试题来说，考察了面试者的css，js的dom遍历，递归思想，很不错的入门题

1.3K3 0

【面试篇】金九银十面试季，这些面试题你都会了吗?

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常...由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效....href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。...他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数....1.双边距BUG float引起的使用display 2.3像素问题使用float引起的使用dislpay:inline -3px 3.超链接hover 点击后失效使用正确的书写顺序 link

1.5K3 0

对html与body的一些研究与理解

IE6下body设置background颜色边框和边距后的表现还有一点可以证明我上面的推论，就是一旦设置了节点的background背景色之后，的背景色将失效。...标签的满屏的背景色不见了，“失效”了。其实，在我看来，不是“失效”，是生效了。当标签无背景样式时，的背景色其实不是标签的背景色，而是浏览器的。...空白页面下IE和Firefox火狐浏览器左侧的滚动条与否 Firefox下没有滚动条，有时候会产生体验上的一些问题，比如：假设一个页面高度有限，无滚动条，当鼠标移到一个元素上，要显示一个浮动层，但是这个浮动层有一定的高度...而这个透明层就使用绝对定位且与这个平级，高宽100%显示，就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。...前者是经典的IE6 css hack，在当前主流浏览器中，就IE6支持，其含义是指在标签外还有一个隐藏的幽灵标签，我也不知道什么东西，反正IE6认得它就行了。

3K3 0

HTML和CSS

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常...href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 css” rel...他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数....1.双边距BUG float引起的使用display 2.3像素问题使用float引起的使用dislpay:inline -3px 3.超链接hover 点击后失效使用正确的书写顺序 link...前端页面有哪三层构成，分别是什么?作用是什么? 答：结构层 Html 表示层 CSS 行为层 js。 43. Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

7.4K3 0

CSS 层叠上下文（Stacking Context）

本文首发于政采云前端团队博客：CSS 层叠上下文（Stacking Context） https://www.zoo.team/article/css-stacking-context 在网页制作的过程中...当父级容器的 z-index 为 auto 的时候，红色盒子穿过了父级容器出现在了父级容器的背后（被父级容器遮挡住）。当父级容器的 z-index 为 0 的时候，红色盒子无法穿过父级容器。...同样的，以上两段代码基本一样，都是有 3 层的 DIV 盒子。最外层是一个深蓝色盒子，中间一层容器盒子，最下面一层红色及灰色盒子。...当第二层的容器盒子升级为层叠上下文时，红色盒子及灰色盒子的 Z 轴层级受制于第二层的容器盒子。每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。...2、 IE6，7 有个不合常理的地方，就是当元素的 z-index 为 auto 的时候，该元素也升级为创建层叠上下文。这就是为什么在过去 IE6/IE7 的 z-index 一直是个老大难的原因。

1.1K1 0

第140天：前端开发中浏览器兼容性问题总结（一）

有了这些最基本的要求，在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了一、html部分 1.H5新标签在IE9以下的浏览器识别 <!...解决方法：统一设置ul的内外边距为0 二、CSS样式的兼容性 1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 IE的条件注释hack： <!...的概念，其默认的width就是min-width 6.IE6下在使用margin:0 auto;无法使其居中解决办法：为其父容器设置text-align:center; 7.被点击过后的超链接不再具有...a标签上的状态； ":active": a标签被鼠标按着时的状态； 8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0，...parentElement.children 8、常见CSS属性兼容 inline-block: >=ie8 min-width/min-height: >=ie7 :before,:after: >=

3.6K3 1

年薪30万的前端面试题，你能答对几道？|附答案

2.前端页面有哪三层构成，分别是什么?作用是什么? 结构层 Html 表示层 CSS 行为层 js; 3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?...Ie(Ie内核) 火狐谷歌（webkit,Blink） opera(Presto),Safari(wbkit) 4.什么是语义化的HTML?.../IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式： 8.请描述一下...BUG的解决方法双边距BUG float引起的使用display 3像素问题使用float引起的使用dislpay:inline -3px 超链接hover 点击后失效使用正确的书写顺序 link...引用的CSS会等到页面被加载完再加载; import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; 9.介绍一下CSS的盒子模型？

6.6K6 0

148道 CSS 与 JavaScript 基础面试题

CSS面试题 1. 介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？...在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为 content-box，即标准盒模型；如果将 box-sizing 设为 border-box 则用的是IE...如果在 ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。 2. CSS 选择符有哪些？...可以，但也只有 :link 和 :visited 可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。 8. CSS3 新增伪类有那些？...; left: 0; bottom: 0; right: 0; background-color: pink; /方便看效果/ } 水平垂直居中一 /确定容器的宽高宽500高300的层设置层的外边距

1.9K2 0

iPhone X 适配手Q H5 页面通用解决方案

每种页面都可能有底部操作栏，具体如下：通栏页面顶部通栏某些业务的一级页面多数使用了顶部通栏banner的效果，由于iPhone X在状态栏增加了24px的高度，对于现在通栏banner规范的内容区域会有遮挡情况...经过跟同事查看手Q源码后发现，终端对于WebView通栏的情况设置了UIScrollViewContentInsetAdjustmentNever属性，去除了上下安全区域的边距，使得安全区域的上下边距失效了...iphonex.css来给iPhone X访问的页面增加对应的适配层在H5页面上给对应的dom结构加上适配的类名 iphonex.css @media only screen and (device-width.../css/index.v6/index.css"> 链接中增加参数来进行适配: 参数名:_wvx 控制iPhone X适配行为参数名:_wvxTclr 控制顶部适配层颜色参数名:_wvxBclr 控制底部适配层颜色 _wvx 作用 1 <<

14K19 11

【前端芝士树】IE 静态页兼容指南

IE 静态页兼容指南 1. IE 下的网页字符乱码问题原因：这个可能是网页没有设置 meta charset 编码造成。...IE 下的 field 禁用失效解决方法将 disabled 写在 input 上 IE 下的 onclick 失效问题描述如下代码，点击时报错，显示函数未定义 IE 下面的 animation 动画失效问题描述使用 font-awesome 的动画时（loading 效果），倘若用 display 控制显隐，则在 IE 下会表现异常。...container.css("display", "block"); container.css("display"); container.css("opacity", "1"); 使用setTimeout

8054 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭