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

当用户鼠标悬停/拖出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

这里是另一个可能的修正,似乎也适用于我的情况。

将ANY边距(上,右,下,左或任何组合)设置为’auto’似乎可以解决它。

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

要么:

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

等等。

http://stackoverflow.com/questions/5788726/add-remove-css-will-cause-ie9-to-increase-the-tables-height

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 添加/删除CSS将导致IE9增加表的高度