JQuery 选择的插件在 IE 中导致垂直页面溢出问题

Question

我有多个 selector 在我看来它按预期工作，除非我使用 JavaScript 重置列表。

列表重置前没有垂直滚动条，重置后在视图页脚下方添加了很多空 space，创建了一个垂直滚动条，我不知道为什么这个空 space 正在出现。

这是我之前的视图截图：

这是点击重置列表按钮后的截图：

导致此问题时我采取的步骤是：

Select 列表中的一项或多项
点击重置列表按钮
选择的 multiselect 正确刷新，但出现 CSS 问题

我的代码 decleration 工作正常减去意外的 CSS 行为，如下所示：

<select id="chosenMultiSelect" multiple="multiple" >
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
    <option>Item 4</option>
    <option>Item 5</option>
    <option>Item 6</option>
    <option>Item 7</option>
    <option>Item 8</option>
    <option>Item 9</option>
</select>

<button id="btnClear" class="btn btn-default">Reset list</button>

<script type="text/javascript">
    $(document).ready(function () {
        $('#chosenMultiSelect').chosen({ width: '100%' });

        $('#btnClear').click(function () {
            $('#chosenMultiSelect').val('').trigger('chosen:updated');
        });
    });
</script>

其他信息：

我已经在 IE、Chrome 和 Firefox 中测试过，它似乎只发生在 IE 的浏览器（版本 9、10 和 11）中。
如果我在多 selector.

2015 年 2 月 11 日更新

我现在在其他情况下也遇到过这种情况。例如，将它用作 Bootstrap 模态框内的单个 select，这会（并非总是但有时）导致页面上出现大量溢出。

没有其他人经历过这种情况吗？您知道是什么原因造成的吗？可能是在某处定义的其他 CSS 等等

Answer 1

决定再看看这个，发现有人在 GitHub page 上报告了类似的问题。

我尝试将我使用的版本从 1.0 更新到 1.5.1，但这没有用，但是问题提出者确实提供了 CSS 解决方法，它不能完全解决问题，但提供了一个更好的解决方案，但取决于不同的屏幕尺寸。

这是 CSS 代码，需要包括...

.chosen-container .chosen-drop {
     overflow-y: auto;
     max-height: 400px;
}

提出问题并提供解决方法的

bharos 还提供了以下评论

This is a workaround, as I understood that the chosen dropdown, when in hidden state is having a large size, when it has large number of options. So when we restrict the max-height this doesn't happen. Make this max-height to a comfortable value according to your requirements. But this is an issue which needs to be addressed from chosen, this is just a workaround.

JQuery 选择的插件在 IE 中导致垂直页面溢出问题

JQuery Chosen plugin causing vertical page overflow issue in IE

css

asp.net-mvc

internet-explorer

jquery-chosen

twitter-bootstrap-3