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

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开发者_如何学JAVA: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.

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.

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

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

In case anyone came here looking for a fix for datatables jquery plugin, the proper class to add this fix to is:

.dataTables_scrollBody
{
    margin-top:auto;
}

Took a bit of digging to find the proper div, so I figured I would try to save someone time.

I might have just solved it.

Try:

width: 100%;
display: inline-block;

on the containing element ("div.grid-body" in this case).

Open Developer tools and remove the table-layout:fixed rule from the table that is the child of grid-body. it should work may be.

It stops doing it and yet does the mouse hover effect by setting:

 div.grid-body {
     background: red; border: 0; overflow: hidden; width: 100%; position: relative;
 }

instead of overflow:auto. Mabe you'd prefer to use overflow:scroll or visible. And make it trigger this as an extra property only for the IE9 case.

remove with form the first 'TD' element <td style="width:3040px;". It will help.

Do you need so huge "td" there ?

just to see

div.grid { background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; zoom: 1; width:100%; }

what about this:
    width:100% !important; 

if you can change the overflow try this

div.grid-body { background: red; border: 0; overflow: hidden; width: 100%; position: relative; }

else

change your script to this (the problem is in the add/remove class)

 $(document).ready(function (){
   $('.item').mouseover(function () {
      $(this).parent("tr").css("color", "#6eadff");
     }).mouseout(function() {
      $(this).parent("tr").css("color","#000");
   });
 });

why do you do it with JS and not with the css? i.e:

.grid-body table tr:hover {background:red}

Maybe you should just "memorize" the height of the element in a variable when the mouseover event is fired, and then set it back to that value again when the mouseout event is fired.

$(document).ready(function (){
 $('.item').mouseover(function () {
     // store the height in a variabile (keep also in mind margins and paddings)
     $(this).parent().addClass("item-over");
 }).mouseout(function() {
     $(this).parent().removeClass("item-over");
     // now set back the original height
 });
 }
);

should work to just add a fixed height to the table row

so the containing table row reads: <tr height="50px">

you can see it working here http://jsfiddle.net/f3TDb/

I'm assuming that you're not doing it wisth divs and css:hover for a specific reason?

i realize i'm months behind on this, but this stumped me yesterday and found this thread. hopefully my answer helps:

it's the overflow: auto in div.grid-body that's messing things up. you'll have to change this to scroll, possibly:

div.grid-body {
    overflow-x: scroll;
}

if you don't want the vertical scrollbars.

note that you'll have to code your js to determine if you need a scrollbar so you can set overflow-x to visible (the default) if there are no overflows and scroll if there are, simulating auto.