javascript - 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;
}