无法在IE中将div放在iframe上

Question

我使用位置relative＆amp;放置div和iframe absolute哪个在Chrome上运行正常，但它在IE中不起作用。我在IE中使用Foxit Reader来显示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＆＃39; ../../ styles / light-theme-definitions.less＆＃39;;

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

工作PLUNKER. Please open it with IE or save it on ur local disk and open it with IE

更新：2

我实现了逻辑，但div仍未通过pdf iframe。请尝试点击Plunker上的任意位置。

实际上，我希望doc-overlay在现实生活中可以点击。正如您所观察到的，点击事件（使用ng-click）不适用于PDF。请参阅检查元素屏幕截图以获得更清晰的信息。 IE＆amp; Chrome。结帐蓝色区域也看到差异

Answer 1

您需要进行黑客攻击，在其中添加另一个iFrame，或使用https://stackoverflow.com/a/12977151/8833279

中所述的PDF.js之类的库