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

Posted 2023-03-06

【中文标题】添加/删除 CSS 会导致 IE9 增加表格的高度

【英文标题】：Add/remove CSS will cause IE9 to increase the table's height

【发布时间】：2011-08-12 22:08:30

【问题描述】：

当用户将鼠标悬停/移出 TR 以更改某些 CSS 颜色时，我将鼠标事件添加到 html TR。但在 IE9 中似乎有一个问题，即每次 CSS 更改时表格的高度都会不断增加。

注意：该问题仅在出现水平滚动条时出现。

这是 HTML。

<div style="width:100%;height:100%;">
    <div class="grid">
        <div class="grid-body">
            <table  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。

【问题讨论】：

9个版本之后，IE还是不能搞定:)

【参考方案1】：

如果有人来这里寻找数据表 jquery 插件的修复程序，添加此修复程序的正确类是：

.dataTables_scrollBody

    margin-top:auto;

花了一些时间才找到合适的 div，所以我想我会尽量节省一些时间。

【参考方案2】：

博文IE9 Hover Bug Workaround中建议的另一个可能的修复方法：

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

【参考方案3】：

我意识到我在这方面落后了几个月，但这让我昨天感到困惑并找到了这个线程。希望我的回答有帮助：

是div.grid-body 中的overflow: auto 搞砸了。您必须将其更改为 scroll，可能：

div.grid-body 
    overflow-x: scroll;

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

请注意，您必须编写 js 代码以确定是否需要滚动条，因此如果没有溢出，您可以将 overflow-x 设置为 visible（默认值），如果有溢出，则设置为 scroll，模拟 @ 987654328@.

【参考方案4】：

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

所以包含表的行显示为： <tr height="50px">

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

我假设您出于特定原因没有使用 div 和 css:hover 进行操作？

【参考方案5】：

也许您应该在触发 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
 );
 
);

【参考方案6】：

这是另一种可能的解决方法，似乎也适用于我的情况。

将任何边距（上、右、下、左或任何组合）设置为“自动”似乎可以解决这个问题。

div.grid-body 
    margin: 0px auto;

或者：

div.grid-body 
    margin-top: auto;

等等

【讨论】：

很好...我今天遇到了这个问题，花了好几个小时试图找出问题所在，直到我发现这个问题。

我不知道为什么会修复它，但感谢您找到它。

我花了一整天的时间来解决仅在 IE9 上出现的“溢出自动，高度增长错误”。这就是解决方案！

不错的一个。 Christ IE 就是个笑话。

【参考方案7】：

我可能刚刚解决了它。

试试：

width: 100%;
display: inline-block;

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

【讨论】：

另请参阅我的其他答案，它可能具有较少的副作用。

神秘的是，这解决了我同样的问题，在这种情况下，我添加了溢出的容器：auto;通过jquery动态地。

【参考方案8】：

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

.grid-body table tr:hover background:red

【参考方案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");
   );
 );

【讨论】：

使用 overflow:hidden 可以避免这个问题，但是如果内容超出了它的高度，它会破坏滚动条的功能。任何想法？或者您希望我们在任何其他属性发生变化时检查它的高度？ （恐怕会引入 IE 性能问题）

【参考方案10】：

只是为了看看

div.grid 背景：#DAE7F6；边框：1px 实心#86A4BE；溢出：隐藏； 缩放：1； 宽度：100%；

what about this:
    width:100% !important; 

【讨论】：

我根据您的建议进行了测试，但在 IE9 浏览器上不起作用。

【参考方案11】：

删除第一个“TD”元素<td style="width:3040px;"。会有帮助的。

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

【讨论】：

是的，我需要它，因为我用它来模拟真正的问题。

【参考方案12】：

它停止这样做，但通过设置鼠标悬停效果：

div.grid-body 背景：红色；边框：0；溢出：隐藏；宽度：100%；位置：相对；

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

【讨论】：

我们无法更改溢出设置，因为我们不知道 Web 开发人员如何在他们的应用程序中使用网格，我们必须依靠溢出：自动来依赖浏览器的行为。有什么解决办法吗？

您的 html 中也有相当内联的 css（客户可能不喜欢那样），并且在一个表中，您有 style="table-layout:fixed;。看起来它也删除了删除它的问题：尝试使用其他可能的值。

在实际情况下，它有两个表，一个用于标题，一个用于内容，在该示例中，我只是删除了一些不相关的代码以澄清问题。

我没有 ie9，所以我不必测试这个，但是尝试使用“.toggleClass(ClassName)”而不是 .addClass(ClassName)，它为我节省了一些问题。

【参考方案13】：

打开开发者工具并从作为 grid-body 的子表的表中删除 table-layout:fixed 规则。它应该可以工作。

【讨论】：

但 table-layout:fixed 由于某种原因无法删除。