javascript - 添加/删除 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;
 }

您可以运行完整示例 here .

Answer 1

这是另一个似乎也适用于我的情况的可能修复方法。

将任何边距(顶部、右侧、底部、左侧或任意组合)设置为“自动”似乎可以解决问题。

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

或者:

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

等等