Question

当用户鼠标悬停在TR上以更改某些CSS颜色时，我将鼠标事件添加到HTML TR。但在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;
 }

您可以运行完整示例here。

Answer 1

这是另一个可能的解决方案，在我的情况下似乎也有效。

将任何边距（顶部，右侧，底部，左侧或任意组合）设置为“自动”似乎可以解决此问题。

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

或者：

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

等

Answer 2

博文IE9 Hover Bug Workaround中建议的另一种可能的解决方法：

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

Answer 3

如果有人来到这里寻找datatables jquery插件的修复程序，那么添加此修复程序的正确类是：

.dataTables_scrollBody
{
    margin-top:auto;
}

进行了一些挖掘以找到合适的div，所以我想我会试着节省一些时间。

Answer 4

我可能刚刚解决了它。

尝试：

width: 100%;
display: inline-block;

在包含元素上（在本例中为“div.grid-body”）。

Answer 5

它停止这样做，但通过设置：

来完成鼠标悬停效果

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

而不是溢出：自动。 Mabe你更喜欢使用溢出：滚动或可见。并使其作为IE9案例的额外属性触发它。

Answer 6

打开开发人员工具并从表格中移除table-layout：fixed规则，该表格是grid-body的子节点。应该可以。

Answer 7

从第一个'TD'元素<td style="width:3040px;"中删除。它会有所帮助。

你需要那么大的“td”吗？

Answer 8

只是为了看

div.grid { 背景：＃DAE7F6;边框：1px solid＃86A4BE;溢出：隐藏; zoom：1; 宽度：100％; }

what about this:
    width:100% !important;

Answer 9

如果你可以改变溢出试试这个

div.grid-body { 背景：红色;边界：0;溢出：隐藏;宽度：100％;位置：相对; }

其他

将您的脚本更改为此（问题出在添加/删除类中）

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

Answer 10

你为什么用JS而不用css？即：

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

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

Answer 12

应该只是为表格行添加一个固定的高度

所以包含的表行如下： <tr height="50px">

你可以在这里看到它http://jsfiddle.net/f3TDb/

我假设你没有这样做，因为divs和css：因特定原因而悬停？

Answer 13

我意识到我已经落后于此了，但昨天这让我感到难过并找到了这个帖子。希望我的回答有所帮助：

overflow: auto div.grid-body中的scroll搞砸了。您必须将此更改为div.grid-body { overflow-x: scroll; }，可能：

overflow-x

如果您不想要垂直滚动条。

请注意，您必须对js进行编码以确定是否需要滚动条，以便在没有溢出且visible时将scroll设置为auto（默认值）如果有的话，模拟{{1}}。

添加/删除CSS将导致IE9增加表的高度

13 个答案: