Добавление / удаление CSS приведет к увеличению высоты таблицы в IE9

Question

Я добавляю событие мыши в HTML TR, когда пользователь наводит курсор мыши на TR, чтобы изменить цвет CSS.Но в 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;
 }

Вы можете запустить полный пример здесь .

Answer 1

удалить с первого элемента 'TD' <td style="width:3040px;". Это поможет.

Тебе нужен такой огромный "тд"?

Answer 2

Откройте инструменты разработчика и удалите макет таблицы: фиксированное правило из таблицы, являющейся дочерним элементом grid-body. должно сработать может быть.

Answer 3

Прекращает делать это и все же делает эффект наведения мыши, устанавливая:

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

вместо переполнения: авто.Mabe вы бы предпочли использовать переполнение: прокрутка или видимый.И заставьте это вызвать это как дополнительное свойство только для случая IE9.