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>时减小滚动条的宽度1}}达到最大高度。

所以你要做的就是在<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查看器与顶部下拉滚动条重叠

1 个答案: