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

PDF viewer in IE 11 overlaps top dropdown scrollbar

本文关键字：顶部 滚动条 重叠 中的 PDF IE      更新时间：2023-09-26

我有一个工具栏，在<object></object>标签上方有一个下拉列表（截图）。当显示 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>

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

所以你想做的是让<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;
}
相关文章：