1

Bootstrap と jQuery を使用した複数選択オプション リスト用の David Stutz による優れたプラグインがあります。

資力：

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

IEz-indexが高い値に設定されている場合は、他の値をオーバーライドしますz-index。 

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