为什么带有滚动的 div 在悬停时会调整 TH 的大小答案

【问题标题】：Why does the div with scroll resizes on hover for TH为什么带有滚动的 div 在悬停时会调整 TH 的大小
【发布时间】：2012-11-04 07:52:06
【问题描述】：

由于某种原因，当我在带有滚动条的 div 内的 TH 上使用悬停选择器时，父 div 会调整大小。每次触发鼠标悬停效果时，div 都会增加一行。

我在其他浏览器中测试过，但只能在 IE 9 中重现。有人有办法解决这个问题吗？

<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9" />
<style>
    .testScroller {
        max-width: 200px;
        overflow-x: auto;
        background-color: green;
    }
    .testHeader:hover { 
        background-color: lightBlue;
    }
</style>
</head>
<body>
    <div class="testScroller">
        <table >
            <tr >
                <th class="testHeader">header 0</th>
                <th class="testHeader">header 1</th>
                <th class="testHeader">header 2</th>
                <th class="testHeader">header 3</th>
                <th class="testHeader">header 4</th>
                <th class="testHeader">header 5 </th>
            </tr>
            <tr >
                <td >0</td>
                <td >1</td>
                <td >2</td>
                <td >3</td>
                <td >4</td>
                <td >5</td>
            </tr>
        </table>
    </div>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

你应该添加：

.testScroller {
    overflow-x: auto;
    min-height:0%   /* IE9 fix */
}

查看此链接了解详情

http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround

【讨论】：

【解决方案2】：

这几乎是美丽的，因为它的错误！但是，如果您将样式更改为此，它应该可以解决问题：

.testScroller {
    max-width: 200px;
    overflow-x: auto;
    background-color: green;
}
.testHeader {
    background-color: green;
}
.testHeader:hover { 
    background-color: lightBlue;
}

正如 cmets 所证明的那样，这比简单的修复所掩盖的要复杂得多。这似乎与 IE9 损坏了某些东西有关 - 这在 IE8 中可以正常工作。

看看这个问题：Force IE9 to emulate IE8. Possible?

这将导致您将元标记更改为：

<meta http-equiv="X-UA-Compatible" content="IE=8" >

【讨论】：

我的实际 CSS 更复杂。我发布的那个 CSS 是我可以用来重现问题的最简单的代码。 .testScroller { 最大宽度：200px;溢出-x：自动；背景颜色：绿色； } .testHeader { 文本对齐：中心；光标：指针；白颜色;背景颜色：绿色； } .testHeader:hover { text-align: center;光标：指针；背景颜色：浅蓝色；颜色：#1d5987； }
嗯。这显然比我想象的要复杂。我所写的内容将起作用，但前提是您不尝试在悬停样式中设置任何其他属性。正如其他人提到的，问题是由 IE 9 不完全支持的 max-width 和 overflow-x 属性引起的。如果您可以在没有它们的情况下重新设计 CSS，那可能是一个更好的解决方案。
这似乎是某种测量功能出错引起的。如果你可以为你的桌子设置一个固定的高度，这也会让问题消失。
我相信说max-width和overflow-x的人是不正确的。我查看了它，它们都得到了完全支持。这可能是评论被删除的原因。
我的应用程序中的行数发生了变化。所以我没有固定的高度

【解决方案3】：

接受了使用设定高度的 adhocgeek 建议，我这样做了。为对象提供 ID 并在加载时运行此 JQuery。感觉很hacky，但它现在有效。我需要添加 30 为滚动条留出空间。

$("#testScroller").height($("#testTable").height() + 30);

在 IE10 中已经解决了导致此问题的任何原因。

如果将高度设置为自身，问题就解决了

$("#testScroller").height(($("#testScroller").height()))

【讨论】：

我还发现如果我将高度设置为加载时的当前高度，问题就解决了。 $("#testScroller").height(($("#testScroller").height()));

【解决方案4】：

我在 IE 11 上遇到了悬停问题。为了解决这个问题，我将 overflow: scroll; 更改为 overflow-y: scroll;，然后它就起作用了。原因是 IE 11 不支持两个值 overflow 简写。

【讨论】：