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

Question

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

在重置列表之前，没有垂直滚动条，重置后，在 View 页脚下方添加了许多空白区域，创建了垂直滚动条，我不知道为什么会出现这个空白区域。

这是我之前的 View 截图:

这是单击重置列表按钮后的屏幕截图:

引起此问题时我采取的步骤是:

1. 选择列表中的一项或多项
2. 点击重置列表按钮
3. 选择的多选刷新正确，但出现 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>

其他信息:

1. 我已在 IE、Chrome 和 Firefox 中对此进行了测试，但似乎仅在 IE 浏览器(版本 9、10 和 11)中发生。
2. 如果我在多重选择器中选择元素之前点击重置列表按钮，则不会出现此问题。

更新 2015 年 2 月 11 日

我现在在其他情况下也经历过这种情况。例如，将其用作 Bootstrap Modal 内的单个选择，这会(并非总是但有时)导致向页面添加溢出负载。

没有其他人经历过这种情况吗？您知道是什么原因造成的吗？可能是其他地方定义的 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.