彈出日曆隱藏IE 9瀏覽器後面的下拉列表

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索引。

唯一的解決方法是更改​​設計，使其在彈出窗口處於活動狀態時不會發生或暫時隱藏所有select元素。當IE6-9仍然流行時，最後的解決方案實際上很常見。