如何让IE 9与davidstutz的Bootstrap Multiselect插件一起使用?

时间:2014-01-01 13:09:35

标签: jquery html css twitter-bootstrap bootstrap-multiselect

David Stutz使用Bootstrap和jQuery创建了一个包含多选项列表的插件。

资源:

Source on Github

Documentation and examples

它适用于Google Chrome,Mozilla Firefox或我测试过的任何其他现代浏览器。

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

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

Snapshot of the problem

以下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上解决这个问题。

1 个答案:

答案 0 :(得分:5)

如果IE将z-index设置为较高的值并覆盖其上的任何其他z-index

<!--[if IE]>
<style type="text/css">
  .btn-group.open{
     z-index: 9999 !important;
  }
</style>
<![endif]-->