IE8 下拉选项不可单击

Question

我在使用 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>

Answer 1

我在IE8中使用选择元素时遇到了这个确切的问题。我单击，选项出现了，但是当我移动到选择一个选项时，它们消失了。

对我来说，问题是CSS3 PIE。我想我只会提供这个答案，因为 CSS3 PIE 的使用非常普遍。就我而言，我使用它来圆润旧浏览器中选择元素的角。

一旦我删除了添加CSS3 PIE"行为"的选择器，问题就消失了。IE8 中的选定元素不再有圆角边框，但它们现在实际上可以正常工作。