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

Answer 3

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.

Answer 4

I might have just solved it.

Try:

width: 100%;
display: inline-block;

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

Answer 5

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.

Answer 6

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.

Answer 7

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

Do you need so huge "td" there ?

Answer 8

just to see

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

what about this:
    width:100% !important; 

Answer 9

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

Answer 10

why do you do it with JS and not with the css? ie:

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

Answer 11

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

Answer 12

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?

Answer 13

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 .