Internet explorer 9封装在div表中，其中包含输入、选择/取消选择错误

Question

我有一个表格，它由单元格中的输入组成。

在输入(或选择/取消选择)表的父div之间移动之后(在IE9中，我没有在另一个IE版本中测试它)出现了奇怪的错误，如果溢出: auto；属性已设置，并且存在水平滚动，则表的父div开始展开。

它的外观：

​

​

链接到样本尝试在表中选择一些行

HTML：

<div class="maindiv">
    <div class="gridwrapper">
        <table>
            <thead>
                <tr>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                </tr>
                <tr>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="bottomdiv">
        <label>AddRow</label>
    </div>
</div>

CSS：

.gridwrapper {
    max-height: 150px;
    overflow: auto;
    border: 1px solid black;
}
.maindiv {
    width: 400px;
    border: 1px solid gray;
}
table {
    width: 100%;
}

有人知道怎么解决这个问题吗？

Answer 1

最小高度: 0%；修复ie9中的这个错误

.gridwrapper {
    min-height: 0%;
    max-height: 150px;
    overflow: auto;
    border: 1px solid black;
}

Answer 2

当溢出属性设置为auto时，我在IE9中看到这种行为。但是，当属性设置为滚动时，我无法在IE中再现该行为。

试试这个：

.gridwrapper {
    max-height: 150px;
    overflow: scroll;
    border: 1px solid black;
}