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

【问题标题】：Add/remove CSS will cause IE9 to increase the table's height添加/删除 CSS 会导致 IE9 增加表格的高度
【发布时间】：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 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。

【问题讨论】：

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

标签： javascript jquery html css internet-explorer

【解决方案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 由于某种原因无法删除。