0

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

1 回答 1

0

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

我的问题是CSS3 PIE。我想我会提供这个答案只是因为 CSS3 PIE 很常用。在我的情况下，我使用它来圆角旧浏览器中选择元素的角。

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

于 2014-05-05T10:25:27.850 回答