Question

I add a mouse event to the HTML TR when user mouse-over/out the TR to change some CSS color. But in IE9 seems to have an issue that the table’s height will keep increasing each time the CSS changed.

Note: the issue only occurs when the horizontal scrollbar appears.

Here is the 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>

Here is the Javascript

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

Here is the CSS setting

 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;
 }

You can run the full example here.

Answer 1

Here’s another possible fix that also seems to work in my case.

Setting ANY margin (top, right, bottom, left, or any combination) to ‘auto’ seems to solve it.

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

Or:

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

Etc.