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很常用。在我的情况下，我使用它来绕过旧版浏览器中select元素的角落。

一旦我删除了我添加CSS3 PIE“行为”的选择器，问题就消失了。在IE8中的选择元素上没有圆形边框，但它们现在实际上是有效的。

IE8下拉选项无法点击

1 个答案: