[英]Overlay effect working on iframe in Chrome but not in IE11
我有一個.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>
我的click事件正在處理標記,但是在使用CSS類“ doc-overlay”的div上單擊時不起作用。
如何處理
我正在使用IE11的Foxit Reader插件
UPDATE1
我發現了我認為正在發生的這個問題。 iframe重疊了
.doc-overlay
,因此點擊無效。 任何對此的建議
實際上,這是一個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; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.