添加/删除CSS将导致IE9增加表的高度

Question

当用户将鼠标移出/移出TR以更改某些CSS颜色时,我将鼠标事件添加到HTML TR.但是在IE9中似乎存在一个问题,即每次CSS更改时表的高度都会不断增加.

注意:只有出现水平滚动条时才会出现此问题.

这是HTML.

<div style="width:100%;height:100%;">
    <div class="grid">
        <div class="grid-body">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
                <tbody>
                    <tr>
                        <td style="width:3040px;" class="item">
                            <div>
                                Please mouse-over me and out
                            </div>
                        </td>
                        <td class="item">
                            <div>
                                Please mouse-over me and out
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

这是Javascript

$(document).ready(function (){
 $('.item').mouseover(function () {
     $(this).parent().addClass("item-over");
 }).mouseout(function() {
     $(this).parent().removeClass("item-over");
 });
 }
);

这是CSS设置

 html, body {height:100%}
 body {
     margin: 0; padding: 0 5px;
 }
 div.grid {
     background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; zoom: 1;
 }
 div.grid-body {
     background: red; border: 0; overflow: auto; width: 100%; position: relative;
 }
 tr.item-over {
     color: #6eadff;
 }

您可以在此处运行完整示例.

Answer 1

这是另一个可能的解决方案,似乎也适用于我的情况.

将任何边距(顶部,右侧,底部,左侧或任意组合)设置为"自动"似乎可以解决它.

div.grid-body {
    margin: 0px auto;
}

要么:

div.grid-body {
    margin-top: auto;
}

等等.

Answer 2

另一个可能的修复建议在博客文章IE9 Hover Bug解决方法:

div.grid-body {
    min-height: 0%;
}