David Stutz使用Bootstrap和jQuery创建了一个包含多选项列表的插件。
资源:
它适用于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上解决这个问题。
答案 0 :(得分:5)
如果IE将z-index
设置为较高的值并覆盖其上的任何其他z-index
。
<!--[if IE]>
<style type="text/css">
.btn-group.open{
z-index: 9999 !important;
}
</style>
<![endif]-->