Добавление / удаление 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

Вот еще одно возможное исправление, которое также работает в моем случае.

Установка ЛЮБОГО поля (сверху, справа, снизу, слева или любой комбинации) на 'auto', кажется, решает эту проблему.

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

Или:

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

И т. Д.

Answer 2

Другое возможное исправление, предложенное в сообщении в блоге Обход ошибки при наведении курсора на IE9 :

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

Answer 3

Если кто-то пришел сюда в поисках исправления для jquery-плагина datatables, подходящий класс для добавления этого исправления:

.dataTables_scrollBody
{
    margin-top:auto;
}

Потребовалось немного покопаться, чтобы найти правильный div, поэтому я решил, что постараюсь сэкономить кому-то время.

Answer 4

Возможно, я только что решил.

Попробуйте:

width: 100%;
display: inline-block;

на содержащем элементе (в данном случае "div.grid-body").

Answer 5

Я понимаю, что отстала от этого на несколько месяцев, но это поставило меня в тупик вчера и нашло эту ветку.надеюсь, мой ответ поможет:

это overflow: auto в div.grid-body, что все портит.вам придется изменить это значение на scroll, возможно:

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

, если вам не нужны вертикальные полосы прокрутки.

обратите внимание, что вам придется кодировать свои js вопределите, нужна ли вам полоса прокрутки, чтобы вы могли установить overflow-x на visible (по умолчанию), если переполнения нет, и scroll, если таковые имеются, имитируя auto.

Answer 6

должно работать, чтобы просто добавить фиксированную высоту к строке таблицы

, чтобы строка вмещающей таблицы гласила: <tr height="50px">

вы можете видеть, что она работает здесь http://jsfiddle.net/f3TDb/

Я предполагаю, что вы не делаете это с divs и css: hover по определенной причине?

Answer 7

Может быть, вам следует просто «запомнить» высоту элемента в переменной при срабатывании события mouseover, а затем снова установить его на это значение при срабатывании события mouseout.

$(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 8

почему вы делаете это с JS, а не с css? то есть:

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

Answer 9

, если вы можете изменить переполнение, попробуйте это

div.grid-body {background: red;граница: 0;переполнение: скрытое;ширина: 100%;положение: относительное;}

else

измените ваш скрипт на этот (проблема в классе добавления / удаления)

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

Answer 10

просто чтобы увидеть

div.grid { фон: # DAE7F6; граница: 1px solid # 86A4BE; переполнение: скрытое; зум: 1; ширина: 100%; }

what about this:
    width:100% !important;