3

出于某种原因，当我在带有滚动的 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>
4

4 回答 4

4

您应该添加：

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

有关详细信息，请参阅此链接

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

于 2013-02-08T09:51:02.290 回答
2

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

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

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

看看这个问题：Force IE9 to emulate IE8。可能的？

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

<meta http-equiv="X-UA-Compatible" content="IE=8" >
于 2012-11-15T16:47:31.850 回答
1

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

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

此外，任何导致此问题的原因都已在 IE10 中得到解决。

如果将高度设置为自身，则问题已解决

$("#testScroller").height(($("#testScroller").height()))
于 2012-11-15T18:20:35.010 回答
1

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

于 2018-11-06T12:31:16.407 回答