工作中的一位客户要求我们将表单转换为导航中的下拉菜单。本身不是问题，但是我们这里不允许使用任何JS。如果我们无法提出任何其他解决方案，尽管他们将允许一个小的普通 JS 脚本来处理该问题。
问题
表单上的输入无法在 Internet Explorer 中使用，因为在单击表单元素时整个菜单会隐藏。
我做了一个JS Fiddle的问题，并感谢任何人可以在这里提供的帮助。 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>
还有 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;
}
最佳答案
IE9 可以使用 :target 选择器。在您的示例中，您将 div.button 替换为 a.button:
<a href="#basket-container" class="button">Shopping Basket</a>
将 anchor 添加到 div.basket-container:
<div class="basket-container" id="basket-container">
...
</div>
然后使用 :target 选择器打开下拉列表:
.head-basket .basket-container:target {
background: #fff;
display: block;
}
http://www.quirksmode.org/css/contents.html#t316
不过，您将需要一些额外的关闭按钮来从该目标中删除散列。而在这种情况下，IE8及以下版本仍然无法获得任何解决方案。
所以这是不可避免的。您要么使用 JS 添加一些“事件”类，要么用文本输入替换选择。
要考虑的另一件事是从下拉列表中完全删除该选择输入。改变购物车下拉列表中的数量对我来说似乎是一个非常罕见的用例。而且该功能无论如何都会出现在结帐页面上(会吗？)，因此您可以简化界面并同时解决问题。
关于html - 带有 <select> 的 CSS 下拉菜单在 IE 中不可用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12623541/