我在使用 IE8 时遇到问题,即两个下拉框之一无法正常工作。它在 Firefox、Chrome 和 Safari 以及 IE9+ 中运行良好,但由于某种原因 IE8 无法运行。
基本上,顶部的下拉框可让您单击并显示选择,但只要您向下移动鼠标选择一个选项,下拉框就会消失。有时您可以足够快地选择一个选项,或者如果您使用箭头键,您可以很好地选择选项。底部的盒子完美地工作,没有任何问题,这真的很奇怪。
此外,当我将下拉框移动到表单顶部(在其他输入字段上方)时,通过让您双击下拉列表然后选择选项,它略有改善,但它仍然不完美。
在进一步测试之后,看起来问题可能出在我正在使用的这些 CSS 切换按钮上:http: //ghinda.net/css-toggle-switch/因为这些也没有正确显示(IE8 忽略了所有样式)。
对不起,如果我不够清楚。该网站尚未上线,所以我不能让您看到它,但这是我正在使用的代码。
<label class="control-label">Dropdown2</label>
<div class="controls">
<select class="m-wrap" style="width: 100px; margin-left: 4px; margin-top: 4px;" id="option1" onChange="QuoteRefresh();" tabindex="1">
<option value="">Select...</option>
<option value="1">1</option>
<option value="5">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="6">5</option>
<option value="4">6</option>
</select>
</div>
<label class="control-label">Dropdown 2</label>
<div class="controls">
<select class="m-wrap" style="width: 100px; margin-left: 4px; margin-top: 4px;" id="option2" onChange="QuoteRefresh();" tabindex="1">
<option value="">Select...</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>
<option value="5000">5000</option>
</select>
</div>
我刚刚从我的 HTML 中删除了以下代码,问题就消失了。此代码与上面提到的切换按钮有关。但是我需要这些切换按钮来处理下拉菜单。
<div class="switch candy blue">
<input id="op1" name="sat" type="radio">
<label for="op1" onClick="">Yes</label>
<input id="op2" name="sat" type="radio" checked>
<label for="op2" onClick="">No</label>
<span class="slide-button"></span>
</div>