覆盖效果在 Chrome 中的 iframe 上有效，但在 IE11 中无效答案

【问题标题】：Overlay effect working on iframe in Chrome but not in IE11覆盖效果在 Chrome 中的 iframe 上有效，但在 IE11 中无效
【发布时间】：2017-03-30 06:49:10
【问题描述】：

我有一个带有.less 文件的文档查看器：

div.document-previewer-container {
//height: 400px;
//width: 300px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
//padding: 5px 2px;
> div.document-preview {
    height: 88%;
    //width: 100%;
    position: relative;

    .document-container, .text-container, video, iframe, pre {
        height: 100%;
        width: 100%;
        position: relative;
    }

    .document-container > img {
        max-height: 100%;
        max-width: 100%;
    }

    .text-container pre {
        margin: 0;
        padding: 0;
    }

    .doc-overlay {
        width: 95%;
        height: 95%;
        position: absolute;
        cursor: pointer;
        top: 0;

        p {
            padding: 2px;
        }
    }
}
}

我的html是

<div class="document-previewer-container">
<div class="document-preview">
    <h3 ng-click="vm.openPDF()">yu</h3> <----- THIS CLICK IS WORKING
    <div class="document-container">
        <!-- PDF show in iframe -->
    </div>
    <div class="doc-overlay" ng-click="vm.openPDF()"> <---- THIS CLICK ISN'T becuse if is hidden by iframe
        <!-- any content is shown on the top of PDF file in chrome only, not in IE -->
    </div>
</div>
</div>
</div>

我的点击事件在标签上起作用，但在使用 css 类“doc-overlay”点击 div 时不起作用。

如何处理

我正在使用 IE11 的 Foxit Reader 插件

更新1

我发现了this 我认为我正在发生的问题。 iframe 与.doc-overlay 重叠，因此点击不起作用。 对此有任何建议

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

实际上这是一个 CSS 问题。您使用了 SCSS 格式，这就是 DOM 无法找到类“doc-overlay”的原因。

你可以使用这个 CSS，它会很好用。

div.document-previewer-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
div.document-previewer-container> div.document-preview {
    height: 88%;
    position: relative;
}
    div.document-previewer-container> div.document-preview .document-container, .text-container, video, iframe, pre {
        height: 100%;
        width: 100%;
        position: relative;
    }

    div.document-previewer-container> div.document-preview .document-container > img {
        max-height: 100%;
        max-width: 100%;
    }

   div.document-previewer-container> div.document-preview .text-container pre {
        margin: 0;
        padding: 0;
    }

   div.document-previewer-container> div.document-preview .doc-overlay {
        width: 95%;
        height: 95%;
        position: absolute;
        cursor: pointer;
        top: 0;
}
div.document-previewer-container> div.document-preview  .doc-overlay p {
       padding: 2px;
}

【讨论】：