我有一个文档查看器,其中包含.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;
}
}
}
}
我的网页是
<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 类"文档覆盖"点击div 时不起作用。
如何处理它
我正在使用IE11的福昕阅读器插件
更新1
我发现了这个问题,我认为这个问题正在我身上发生。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;
}