IE 和选择元素

Question

好吧，我被困住了，真的希望能得到一些帮助，因为我已经不知所措了。我创建了一个 jQuery 对话框，在该窗口中，我使用 Bootstrap 创建了一组选项卡。在第一个选项卡上，我有一个带有选择元素的小表单，这一切都与 BackboneJS 绑定在一起。

<div class="control-group times">
     <label class="control-label" for="inputStart">Time</label>
     <div class="controls">
          <select id="inputStart" name="start">
              {{ slots }}
          </select>
          <label class="control-label small" for="inputEnd">-</label>
          <div class="controls">
              <select id="inputEnd" name="end">
                  {{ slots }}
              </select>
          </div>
     </div>
</div>

在 Chrome 上，元素及其所有相关事件可以完美运行。

在 Firefox 上，我看到它打开了，并且在选择一个选项后，完全拒绝关闭它的选项列表。据我所知，这个问题已经在一夜之间消失了，没有对代码进行任何更改。

现在在 IE9 和 10 上，第一次使用后选择字段会失败。它允许您选择一个选项，但如果您再试一次，该选项将不会改变。我发现通过单击选择并返回它会起作用，但这并不理想。几乎就像选择必须失去焦点才能再次使用一样。

这些问题都仅限于鼠标使用。使用键盘效果很好。 我记录了这个问题，以防视频效果更好：Select Fail

有什么想法吗？提前致谢！

Answer 1

如果您使用的是 Bootstrap，请使用 Bootstrap。图书馆至少有 2-3 种方法来做你想做的事。最简单的方法是将form-control 类放在您的选择列表中，这样您就可以实现跨浏览器兼容性。

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

在这里阅读更多： http://getbootstrap.com/css/#forms

Answer 2

在进一步挖掘之后，我偶然发现了这个——jQueryUI Bug

我升级了jQueryUI，到目前为止所有问题都消失了。