Internet Explorer 9包含在div表中，由输入组成，选择/取消选择bug

Question

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

在输入之间移动（或在选择/取消选择之后）表之后，有一个奇怪的错误（在IE9中，我没有在其他IE版本中测试它） - 如果溢出，表格的父div开始扩展：汽车;属性设置和如果有水平滚动

它看起来如何：

Link to sample尝试选择表格中的某些行

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

当overflow属性设置为auto时，我在IE9中看到此行为。但是，当属性设置为滚动时，我无法重现IE中的行为。

试试这个：

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

Answer 2

min-height：0％;修复ie9

中的这个错误

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