Я добавляю событие мыши в 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;
}
Вы можете запустить полный пример здесь.
Вот еще одно возможное исправление, которое также работает в моем случае.
Настройка ЛЮБОГО поля (вверху, справа, внизу, слева или любой комбинации) на "авто", кажется, разрешает его.
div.grid-body {
margin: 0px auto;
}
Или:
div.grid-body {
margin-top: auto;
}
Etc.
Еще одно возможное исправление, предложенное в сообщении в блоге Обходное решение IE9 Hover:
div.grid-body {
min-height: 0%;
}
В случае, если кто-то пришел сюда искать исправление для плагина jquery datatables, правильным классом для добавления этого исправления является:
.dataTables_scrollBody
{
margin-top:auto;
}
Взял немного копать, чтобы найти правильный div, поэтому я решил, что попытаюсь сэкономить время.
Возможно, я только что решил.
Try:
width: 100%;
display: inline-block;
на содержащем элементе ( "div.grid-body" в этом случае).
Он перестает делать это, и все же эффект мыши наводится, устанавливая:
div.grid-body {
background: red; border: 0; overflow: hidden; width: 100%; position: relative;
}
вместо переполнения: auto. Mabe, вы предпочли бы использовать переполнение: прокрутку или видимую. И заставить его вызывать это как дополнительное свойство только для случая IE9.
Откройте инструменты разработчика и удалите таблицу-макет: исправлено правило из таблицы, которая является дочерним элементом сетки-тела. он должен работать.
удалить с формой первый элемент "TD" <td style="width:3040px;". Это поможет.
Вам нужен такой огромный "td"?
чтобы увидеть
div.grid { фон: # DAE7F6; border: 1px solid # 86A4BE; переполнение: скрыто; zoom: 1; ширина: 100%; }
what about this:
width:100% !important;
если вы можете изменить переполнение, попробуйте это
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");
});
});
почему вы делаете это с JS, а не с css? то есть:
.grid-body table tr:hover {background:red}
Возможно, вам нужно просто "запомнить" высоту элемента в переменной при запуске события 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
});
}
);
должен работать, чтобы просто добавить фиксированную высоту в строку таблицы
поэтому строка таблицы содержит: <tr height="50px">
вы можете увидеть, как он работает здесь http://jsfiddle.net/f3TDb/
Я предполагаю, что вы не делаете это wisth divs и css: зависаете по определенной причине?
Я понимаю, что у меня месяцы позади этого, но это вчера меня насторожило и нашло эту нить. надеюсь, мой ответ поможет:
это overflow: auto в div.grid-body, что все испортит. вам придется изменить это на scroll, возможно:
div.grid-body {
overflow-x: scroll;
}
если вам не нужны вертикальные полосы прокрутки.
обратите внимание, что вам нужно будет закодировать js, чтобы определить, нужна ли вам полоса прокрутки, чтобы вы могли установить overflow-x в visible (по умолчанию), если нет переполнений и scroll, если есть, имитируя auto.