IE 11 中的 PDF 查看器与顶部下拉滚动条重叠

Question

我有一个工具栏，在 <object></object> 标签上方有一个下拉菜单 (screenshot)。当显示 pdf 文件然后带有滚动条的下拉菜单退出时，滚动条消失在 pdf 文件后面。怎么解决？

有密码：

    <div id="modal-content-container">
    <div class="modal-header"></div>
    <div class="modal-body">
        <div class="col-md-12 assign-mode" style="display: block;">
            <div class="col-md-2" style="position: relative;">
                <div style="position: relative;">
                    <div style="margin-bottom: 2px;"><label style="margin-bottom: 0px;"><input name="destinationType"
                                                                                               type="radio" checked=""
                                                                                               value="RESIDENT">
                        Resident</label> <label style="margin-bottom: 0px;"><input name="destinationType" type="radio"
                                                                                   value="COMPANY_FOLDER">
                        Company</label></div>
                    <input class="form-control run" id="destinationId" type="text" placeholder="Click to Assign">
                    <ul class="items" style="display: block; z-index: 1;">
                        <li class="item" data-resident-id="2">Kathlee Cambria Cole</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <li class="item" data-resident-id="1">Amy Davis</li>
                        <iframe class="ie-fix" src="about:blank"></iframe>
                    </ul>
                </div>
            </div>
        </div>
        <div class="preview-content">
            <div class="embed-container">
                <object data="unassignedDocuments/98/preview" type="application/pdf" style="height: 100%;">
                    <div style="margin: 50px auto; width: 70%; text-align: center;">Your browser does not support file
                        with this extension. Please download document <a href="unassignedDocuments/98/download">here</a>.
                    </div>
                </object>
            </div>
        </div>
    </div>
    <div class="modal-footer"></div>
</div>

Answer 1

问题是，您将 <iframe> 放在 <ul> 标签内以对抗底层的 <object> 元素，但是 <iframe> 大小会随着滚动条的宽度减小<ul> 达到最大高度。

所以你要做的是让 <iframe> 远离 <ul>，最好在它之前：

<div style="position: relative;">
    <iframe class="ie-fix" src="about:blank"></iframe>
    <ul class="items" style="display: block; z-index: 1;">
        <li class="item" data-resident-id="2">Kathlee Cambria Cole</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
        <li class="item" data-resident-id="1">Amy Davis</li>
    </ul>
</div>

然后您将需要一些 css 将它们对齐：

.ie-fix {
    position: absolute;
    width: 100%;
    height: 300px;
    z-index: 1;
}
.items {
    position: absolute;
    width: 100%;
    max-height: 300px;
    z-index: 1;
}

IE 11 中的 PDF 查看器与顶部下拉滚动条重叠

PDF viewer in IE 11 overlaps top dropdown scrollbar

html

javascript

css

internet-explorer

pdf-viewer