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

Question

我的视图中有一个多选择器，除非我使用JavaScript重置列表，否则它会按预期工作。

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

以下是我观点的截图：

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

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

1. 选择列表中的一个或多个项目
2. 点击重置列表按钮
3. 正确选择多选刷新，但发生CSS问题

我的代码解除，工作正常减去意外的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>

其他信息：

1. 我在IE，Chrome和Firefox中对此进行了测试，它似乎只发生在IE的浏览器中（版本9,10和11）。
2. 如果在多重选择器中选择了项目之前单击重置列表按钮，则不会发生此问题。

更新02/11/2015

我现在在其他情况下经历过这种情况。例如，在Bootstrap模式中使用它作为单个选择，它将（不总是但有时）导致溢出的负载被添加到页面中。

没有其他人经历过这个，你知道是什么导致了它吗？可能是其他CSS定义在某处等。

Answer 1

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

我尝试将我使用的版本从1.0升级到1.5.1并且这不起作用，但是问题提升者确实提供了一个CSS工作，它不能完全解决问题，但提供了一个更好的解决方案，但是取决于不同的屏幕尺寸。

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

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

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

bharos 也提供了以下评论

  

这是一种解决方法，因为我理解所选择的下拉列表   在隐藏状态下具有大尺寸，当它具有大量的时   选项。因此，当我们限制最大高度时，这不会发生。使   这个最大高度根据您的要求提供舒适的价值。   但这是一个需要从选择中解决的问题，这是   只是一种解决方法。