CSS下拉與<select>在IE

Question

在工作中沒有客戶端可用要求我們轉換一種形式爲自己的導航下拉菜單。本身並不是問題，但我們不允許在這裏使用任何JS。如果我們不能提出任何其他修復，儘管他們會允許一個小的香草JS腳本來處理這個問題。

的問題

表格中的輸入不能在Internet Explorer中被用作整個菜單隱藏上單擊窗體元件上。

我已經做了問題的JS Fiddle，並希望任何幫助，任何人都可以在這裏提供。 HTML/CSS不是我自己的。它已經在項目中，不幸的是我無法將其剝離得更遠，否則這個網站的其他部分就會中斷。

我已張貼下面還有的HTML/CSS對於那些誰寧願剛讀在這裏比在上JS提琴。

的HTML：

<div class="head-basket"> 
    <div class="button">Shopping Basket</div> 

    <div class="basket-container"> 
     <form method="post" action="#" enctype="multipart/form-data"> 
     <div><input type="hidden" name="basket" value="1" /></div> 
     <table cellspacing="0" cellpadding="0" border="0"> 
      <tbody> 
       <tr class="product-row"> 
        <td class="item"><a href="/?r=238637" title="remove Dickies Redhawk Super Work Trousers with Free Knee Pads" class="rem">x</a><a href="/dickies-workwear/dickies-knee-pad-trousers/dickies-redhawk-super-work-trousers-with-free-knee-pads-p545.htm">Dickies Redhawk Super Work Trousers with Free Knee Pads</a></td> 
        <td class="quantity"> 
        <select name="q238637" id="q238637" class="do-change"> 
         <option value="1" selected="selected">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
         <option value="5">5</option> 
         <option value="6">6</option> 
         <option value="7">7</option> 
         <option value="8">8</option> 
         <option value="9">9</option> 
         <option value="10">10</option> 
         <option value="11">11</option> 
         <option value="12">12</option> 
         ... 
        </select> 
        </td> 
       </tr> 
       <tr class="product-desc"> 
        <td class="item" colspan="2"><span>Waist Size: 30", Leg Length: 30", Colour: Black</span></td> 
       </tr> 
       <tr class="tax-row"> 
        <td colspan="3"><span>Item total:</span>£14.99</td> 
       </tr> 
       <tr class="tax-row"> 
        <td colspan="3"><span>UK tax at 20%:</span>£3.00</td> 
       </tr> 
       <tr class="total-row"> 
        <th colspan="3"><span>Total:</span> £17.99</th> 
       </tr> 
       <tr class="spacer-row"> 
        <td colspan="3"> </td> 
       </tr> 
       <tr class="delivery info-row"> 
        <td colspan="3"> 
        <p><span class="bold">Free Delivery</span> to England for orders over <span class="bold">£90.00</span> (excluding tax). </p> 
        <p>Spend another <span class="bold">£75.01</span> to qualify!</p> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <div class="buttons"> 
      <noscript><div><input type="submit" class="button update" value="Update" /></div></noscript> 
      <a href="/your-basket/" class="button tobasket action" rel="nofollow"><tt>Proceed to Secure</tt>Checkout</a> 
     </div> 
     </form> 
    </div> 
</div>​ 

而CSS：

.head-basket { 
    position: absolute; 
    z-index: 1000; 
    width: 190px; 
    right: 0; 
    top: 23px; 
} 

.head-basket .button { 
    width: 90%; 
    border: none; 
    padding: 5%; 
    text-align: center; 
} 

.head-basket .button:hover { 
    border-bottom: none; 
    box-shadow: none; 
} 

.head-basket:hover .button { 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
    color: #fff; 
    border-bottom: none; 
} 

.head-basket .basket-container { 
    background: #fff; 
    border: 2px solid #000002; 
    display: none; 
    padding: 3px; 
} 
.head-basket:hover .basket-container, .head-basket:active .basket-container, .head-basket .basket-container:active, .head-basket .basket-container:hover { 
    background: #fff; 
    display: block; 
} 


button, .button, .button:visited { 
     display: inline-block; 
     padding: 8px 15px; 
     line-height: normal; 
     position: relative; 
     white-space: nowrap; 
     font-size: 12px; 
     font-weight: bold; 
     color: #aaa; 
     background: #000002; 
     background: -moz-linear-gradient(#383834,#222222); 
     background: -webkit-linear-gradient(#383834,#222222); 
     -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#383834',endcolorstr='#222222')"; 
     filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#383834',endcolorstr='#222222'); 
     -moz-border-radius: 3px; 
     -webkit-border-radius: 3px; 
     border-radius: 3px; 
     border: 1px solid #111; 
     border-bottom-color: #555; 
     border-left-color: #555; 
     cursor: pointer; 
     user-select: none; 
     -webkit-user-select: none; 
     -moz-user-select: none; 
     text-decoration: none; 
     text-align: left; 
     border-width: 2px 
} 

button:hover, .button:hover { 
     text-decoration: none; 
     -webkit-box-shadow: 0 1px 1px #c6c6c6; 
     -moz-box-shadow: 0 1px 1px #c6c6c6; 
     box-shadow: 0 1px 1px #c6c6c6; 
     color: #fff !important; 
} 

button:focus, .button:focus { 
     outline: 0; 
} 

button:active, .button:active { 
     -webkit-box-shadow: inset 0 1px 2px #c6c6c6; 
     -moz-box-shadow: inset 0 1px 2px #c6c6c6; 
     box-shadow: inset 0 1px 2px #c6c6c6; 
}​ 

Answer 1

有使用的可能性：目標選擇器IE9。在你比如你a.button替換div.button：

<a href="#basket-container" class="button">Shopping Basket</a> 

添加錨div.basket容器：

<div class="basket-container" id="basket-container"> 
... 
</div> 

然後用：目標選擇有下拉菜單打開：

.head-basket .basket-container:target { 
    background: #fff; 
    display: block; 
} 

http://jsfiddle.net/HssXt/10/

http://www.quirksmode.org/css/contents.html#t316

雖然，你會需要一些額外的關閉按鈕，從該目標中刪除的哈希值。而在這種情況下，IE8及以下版本仍然無法獲得任何解決方案。

所以這是不可避免的。您可以使用JS來添加一些「活動」類或用文本輸入替換選擇。

另一個要考慮的是從下拉列表中刪除選擇輸入的。在購物車下拉菜單中更改數量對我來說似乎是一個非常罕見的用例。而且這個功能無論如何都會出現在結賬頁面上（是嗎？），所以你可以簡化界面並同時擺脫問題。