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

桩白墨
前端笔记
2018-12-21
167热度
0评论

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>