Html CSS下拉列表，带有<；选择>；在IE中不可用

一位正在工作的客户要求我们将表单转换为其导航上的下拉菜单。这本身不是问题，但我们不允许在这里使用任何JS。如果我们不能想出任何其他的解决办法，尽管他们会允许一个小的香草JS脚本来处理这个问题

问题

表单上的输入不能在Internet Explorer中使用，因为单击表单元素时整个菜单都会隐藏

我已经对这个问题做了详细的讨论，并将感谢任何人在这里提供的任何帮助。HTML/CSS不是我自己的。它已经在项目中了，不幸的是，我不能把它拆得比这个更细，否则网站的其他部分会被破坏

我已经发布了下面的HTML/CSS，也是为了那些宁愿在这里阅读也不愿在JS Fiddle上阅读的人

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>​ 

---

有可能对IE9使用：目标选择器。在您的示例中，将div.button替换为.button：

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

不过，您需要一些额外的关闭按钮来从此目标中删除哈希。在这种情况下，IE8及以下版本仍然无法获得任何解决方案

所以这是不可避免的。您可以使用JS添加一些“活动”类，或者用文本输入替换select

---

另一个要考虑的是从下拉菜单中删除该选择输入。在购物车下拉列表中更改数量对我来说似乎是一个非常罕见的用例。而且该功能无论如何都会出现在结帐页面上（会吗？），因此您可以简化界面，同时解决问题。

您仍然存在此问题吗？是的，如果不使用JS，我们从来没有找到有效的解决方案；虽然客户端对JS的使用真的不满意，但我现在看了一下，IE似乎有问题。这让它变得非常简单。但它仍然不起作用。我也试着在没有运气的情况下找到一个解决办法。当时我在谷歌上搜索了很多次，我想我得出的结论是这也是一个IE漏洞。出于某种原因，将鼠标悬停在

上似乎会将焦点/悬停事件从其容器中移除。是的，我认为IE假设将：焦点放在上也意味着它处于：悬停状态，从而从主下拉列表中移除：悬停状态。这是一个困难的问题。我不确定你是否可以在不使用JS的情况下修复IE问题。我在谷歌上搜索了一段时间，没有人能找到一个可接受的解决方案。我会用一个替换控件。这不是最好的解决办法，但它会消除你的头痛。不幸的是，客户要求这样做，所以我别无选择。最终他们接受了JS解决方案。就我个人而言，我同意，在下拉列表中，头球篮的得分太高了，谁想要一个有300个数字的

select

？人们打字更容易。谢谢你的解决方案，非常感谢。

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

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

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