1

David Stutz 有一个很棒的插件，用于使用 Bootstrap 和 jQuery 的多选选项列表。

资源：

来源 Github

文档和示例

它与 Google Chrome、Mozilla Firefox 或我测试过的任何其他现代浏览器完美配合。

我的问题是 IE，特别是 9.0.8112 版本。我正在尝试布置几个多选控件，一个在另一个之下。

您可以在下面的快照中注意到 IE 在其下方的多选控件“后面”隐藏了一个扩展列表。

问题快照

HTML 代码如下：

    <div id="filters_inner">
        Year:
        <select id="example6" class='multiselect_filter' multiple="multiple">
        <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
        <br/>Quarter:
        <select id="Select1" class='multiselect_filter' multiple="multiple">
        <option value="1">Q1</option>
            <option value="2">Q2</option>
            <option value="3">Q3</option>
            <option value="4">Q4</option>
    </select>
    </div>

JS代码：

    $(document).ready(function () {
        $('.multiselect_filter').multiselect({
            numberDisplayed: 1
        });
    });

较小的 CSS 修改（我已经验证这些不是原因）：

.btn-group button {
    padding: 1px 3px 1px 3px;
    font-family: Verdana;
    font-size: 11px;
    color: #333333;
    text-align: left;
}
select {
    text-align: left;
}

我很想知道是否有人知道如何在 IE 9 上解决这个问题。

4

1 回答 1

5

如果 IE 设置z-index为高值并覆盖任何其他值z-index。 

<!--[if IE]>
<style type="text/css">
  .btn-group.open{
     z-index: 9999 !important;
  }
</style>
<![endif]-->
于 2014-01-01T13:51:02.183 回答