Question

当日历弹出日历时，它会在IE 9浏览器的下拉列表后面消失。在其他浏览器中它的工作正常。任何人都可以让我知道可能是什么原因以及解决方法是什么。 PSA图像

以下是我用过的CSS。

select {
    border: 1px solid #859099;
}

.orderTracking\.home .searchTable .statusSelect, .dateSelectionWrapper {
    padding-right: 45px;
}

，HTML是

<table id="searchTable"
       class="searchTable">
    <tbody>
        <tr>
            <td class="searchCell">
                <div class="statusSelect">
                    <h3 class="tableheader">Status:</h3>
                    <select name="orderStatus">
                        <option value=""
                                selected="">All</option>
                        <option value="backOrder">BackOrdered</option>
                        <option value="reserved">Reserved</option>
                        <option value="confirmed">Picking</option>
                        <option value="cancelled">Cancelled</option>
                        <option value="complete">Complete</option>
                        <option value="review">Under Review</option>
                        <option value="approved">Approved</option>
                        <option value="demand">Demand</option>
                    </select>
                </div>
                <div class="dateSelectionWrapper startDay">
                    <h3 class="tableheader">Date From:</h3>
                    <div class="dateFieldsWrapper">
                        <input type="Text"
                               name="startMonth"
                               class="startMonth"
                               value="8"
                               readonly=""
                               dir="rtl"
                               size="1">/
                            <input type="Text"
                                   name="startDay"
                                   class="startDay"
                                   value="17"
                                   readonly=""
                                   dir="rtl"
                                   size="1">/
                                <input type="Text"
                                       name="startYear"
                                       class="startYear"
                                       value="2015"
                                       readonly=""
                                       dir="rtl"
                                       size="1">
                    </div>
                    <img class="calendarTrigger"
                         id="f_trigger_c"
                         title="Calendar"
                         src="images/Icon-Calendar.png"
                         style="cursor: pointer;">
                </div>
                <div class="dateSelectionWrapper endDay">
                    <h3 class="tableheader">Date To:</h3>
                    <div class="dateFieldsWrapper">
                        <input type="Text"
                               name="endMonth"
                               class="endMonth"
                               value="9"
                               readonly=""
                               dir="rtl"
                               size="1">/
                            <input type="Text"
                                   name="endDay"
                                   class="endDay"
                                   value="17"
                                   readonly=""
                                   dir="rtl"
                                   size="1">/
                                <input type="Text"
                                       name="endYear"
                                       class="endYear"
                                       value="2015"
                                       readonly=""
                                       dir="rtl"
                                       size="1">
                    </div>
                    <img class="calendarTrigger"
                         id="f_trigger_c1"
                         title="Calendar"
                         src="images/Icon-Calendar.png"
                         style="cursor: pointer;">
                </div>
                <div class="searchBtnCell">
                    <input class="searchBtn"
                           tabindex="4"
                           type="submit"
                           value="Search">
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

这很正常。在IE9和<select>之前，元素被呈现为操作系统级下拉控件。因此，总是将它们绘制在顶部，忽略CSS层和Z-indexing。

唯一的解决方法是更改您的设计，使其无法发生，或在弹出窗口处于活动状态时暂时隐藏所有select元素。当IE6-9仍然流行时，最后的解决方案实际上很常见。

弹出日历会隐藏IE 9浏览器中的后面下拉列表

1 个答案: