Question

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

Answer 1

你应该添加：

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

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

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

Answer 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. Possible?

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

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

Answer 3

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

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

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

如果您将高度设置为自身，则问题已得到修复

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

Answer 4

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

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

4 个答案: