ie8下遮罩被穿透问题的解决办法

最新推荐文章于 2022-04-29 17:42:51 发布

Lynn_candy

最新推荐文章于 2022-04-29 17:42:51 发布

阅读量2.4k

点赞数

分类专栏： ie8遮罩问题文章标签： ie 8

本文链接：https://blog.csdn.net/xmh19940228/article/details/54409410

版权

ie8遮罩问题专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在ie8下面写了一个遮罩层，发现没有起作用，被穿透了，开始以为是z-index问题，后来把值设了很大，还是没解决，我的解决办法如下：

<div class="container" style="z-index=9999">
        <div class="model-content" >弹框</div>
        <div class="mask" style="cursor:pointer;width:100%;height:100%;background-color:#000000;opacity:0.4;filter:alpha(opacity=50);position:absolute;top:0;left:0;right:0;bottom:0;z-index:999;">用于设置背景
        </div>`
</div>

可以试着将.mask这部分用iframe 替换。
如下：

<div class="container"  style="z-index=9999">
        <div class="model-content">弹框</div>
        <iframe class="mask" style="cursor:pointer;width:100%;height:100%;background-color:#000000;opacity:0.4;filter:alpha(opacity=50);position:absolute;top:0;left:0;right:0;bottom:0;z-index:999;">用于设置背景
        </iframe>`
</div>

<div class="container"  style="z-index=9999">
        <div class="model-content">弹框</div>
        <div class="mask" style="cursor:pointer;width:100%;height:100%;background-color:#000000;opacity:0.4;filter:alpha(opacity=50);position:absolute;top:0;left:0;right:0;bottom:0;z-index:999;">用于设置背景
        </div>`
</div>

将.mask移到外面，与.container同级。
如下：

<div class="container"  style="z-index=9999">
        <div class="model-content">弹框</div>
</div>
<div class="mask" style="cursor:pointer;width:100%;height:100%;background-color:#000000;opacity:0.4;filter:alpha(opacity=50);position:absolute;top:0;left:0;right:0;bottom:0;z-index:999;">用于设置背景
</div>`