工作中的客户要求我们将表单转换为导航下拉菜单。本身不是问题,但我们不允许在这里使用任何JS。如果我们不能提出任何其他修复,虽然他们将允许一个小的vanilla 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;
}
答案 0 :(得分:1)
有可能使用:IE9的目标选择器。在您的示例中,您将div.button替换为a.button:
<a href="#basket-container" class="button">Shopping Basket</a>
将锚添加到div.basket-container:
<div class="basket-container" id="basket-container">
...
</div>
然后使用:目标选择器打开下拉列表:
.head-basket .basket-container:target {
background: #fff;
display: block;
}
http://www.quirksmode.org/css/contents.html#t316
但是,您需要一些额外的关闭按钮来从此目标中删除哈希。在这种情况下,IE8及以下版本仍无法获得任何解决方案。
所以这是不可避免的。您可以使用JS添加一些“活动”类,也可以将select替换为文本输入。
要考虑的另一件事是从下拉列表中删除选择输入。在购物车下拉菜单中更改数量对我来说似乎是一个非常罕见的用例。并且该功能将在结帐页面上(无论如何?),因此您可以简化界面并同时摆脱问题。