2018年12月21日

IE 下,加载 pdf 的 iframe,始终遮挡其他元素,z-index 不生效

IE 使用 adobe 的 pdf 插件来预览 iframe 中的 pdf。今天发现,存在遮挡其他元素的问题。

CSDN 上有个讨论帖,抛出了问题,但是没下文:https://bbs.csdn.net/topics/390279802

又找到一个 adobe 官方的讨论帖:https://forums.adobe.com/thread/745905。直接说是 IE 的 bug,他们不可能修复。

于是只好求助于万能的 StackOverFlow:https://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe

经过一番试验,问题解决。


解决方法简述:在需要浮到上层的 div 中,加入一层透明的 iframe。

可能在 IE 下,只有 iframe 之间,z-index 才有可比性吧。


以下是完整 demo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css" media="screen">
      #outer {
          position: relative;
          left: 150px;
          top: 20px;
          width: 100px;
          z-index: 2;
      }

      #inner {
          background: red;
      }

      .cover {
          border: none;
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          z-index: -1;
      }

      #pdf {
          position: relative;
          z-index: 1;
      }
    </style>
  </head>
  <body>
      <div id="outer">
          <div id="inner">my text that should be on top</div>
          <iframe class="cover" src="about:blank"></iframe>
      </div>
      <iframe id="pdf" src="http://file.baimoz.me/lost_dream.pdf" width="200" height="200"></iframe>
  </body>
</html>

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*