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

Question

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

下面是我使用的 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 索引。

唯一的解决方法是更改​​您的设计以使其不会发生，或者暂时隐藏所有 select弹出窗口处于事件状态时的元素。在 IE6-9 还很流行的时候，最后一种解决方案实际上很常见。