Add/remove CSS will cause IE9 to increase the table's height

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.

Answer 2

Another possible fix suggested in the blog post IE9 Hover Bug Workaround:

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