Добавить/удалить CSS заставит IE9 увеличить высоту таблицы

Я добавляю событие мыши в 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;
 }

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

Ответ 1

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

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

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

Или:

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

Etc.

Ответ 2

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

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

Ответ 3

В случае, если кто-то пришел сюда искать исправление для плагина jquery datatables, правильным классом для добавления этого исправления является:

.dataTables_scrollBody
{
    margin-top:auto;
}

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

Ответ 4

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

Try:

width: 100%;
display: inline-block;

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

Вам нужен такой огромный "td"?

Ответ 8

чтобы увидеть

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

what about this:
    width:100% !important;

Ответ 9

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

div.grid-body { фон: красный; border: 0; переполнение: скрыто; ширина: 100%; позиция: относительная; }

else

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

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

Ответ 10

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

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

Ответ 11

Возможно, вам нужно просто "запомнить" высоту элемента в переменной при запуске события 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
 });
 }
);

Ответ 12

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

поэтому строка таблицы содержит: <tr height="50px">

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

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

Ответ 13

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

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

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

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

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