在IE中无法在iframe上放置div

Question

我是放置div和iframes使用的位置relative & absolute，这是很好的铬，但它不工作在IE。我正在使用Foxit Reader在IE显示的pdf文件。

Chrome (可见测试1231 23123 )

​

IE 11 (测试1231 23123在iframe后面)

​

​

以下是我的html：

 <div class="document-previewer-container">
 <div class="document-preview">
    <div class="document-container">
        <iframe id="pdf-container" ng-attr-src="{{vm.selectedDoc.pdfpath`}}"></iframe>
    </div>
    <div class="doc-overlay">
        <p>Test 1231 23123</p>
    </div>
 </div>
 <div class="documents-carousel-wrapper">
    <!-- something -->
 </div>
</div>

我的.less文件：

@import‘././样式/轻量级-主题-定义。

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{
        height: 100%;
        width: 100%;
        position: relative;
    }
    .doc-overlay {
        width: 95%;
        height: 95%;
        position: absolute;
        cursor: pointer;
        top: 0;

        p {
            padding: 2px;
        }
    }
}

> div.documents-carousel-wrapper {
    position: relative;
    overflow: hidden;
    height: 12%;
    min-height: 63px;

    img {
        width: 100%;
        height: 100%;
    }
}

最新情况:1

工作傻瓜。请用IE打开或保存在本地磁盘上，然后用IE打开。

最新情况:2

我实现了逻辑，但是div仍然不支持pdf iframe。请尝试点击柱塞上的任何地方。

实际上，我希望doc-overlay在现实生活中是可点击的。正如您所观察到的，click事件(使用ng-click)没有在PDF上工作。请参考检查元素屏幕截图，以获得更多的清晰度。即 & 铬.查看蓝色区域也可以看到差异

Answer 1

您需要在添加另一个iFrame时进行黑客攻击，或者使用像PDF.js这样的库，如这里所描述的https://stackoverflow.com/a/12977151/8833279