logo标签列表

为什么带有滚动条的div在悬停时会改变大小？

htmlcss
3

出现这种问题的原因是，当我在带有滚动的 div 中使用 hover 选择器来选中一个 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
2

这几乎是一种美丽的错误！但是，如果您将样式更改为以下内容，则应该可以解决问题：

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

正如评论所示，这个问题比简单的修复要复杂得多。这似乎与IE9破坏了某些东西有关 - 在IE8中可以正常工作。

查看这个问题：强制IE9模拟IE8。 可能吗？

这将引导您更改meta标签为：

<meta http-equiv="X-UA-Compatible" content="IE=8" >
我的实际CSS更加复杂。我发布的CSS是我可以用来重现问题的最简单的代码。.testScroller { max-width: 200px; overflow-x: auto; background-color: green; } .testHeader { text-align: center; cursor: pointer; color: White; background-color: green; } .testHeader:hover { text-align: center; cursor: pointer; background-color: lightBlue; color: #1d5987; } - JohnELaw
嗯，这显然比我想象的要复杂得多。我写的代码可以工作，但只有在您不尝试设置悬停样式中的任何其他属性时才能正常工作。问题是，正如其他人提到的那样，由于max-width和overflow-x属性，IE 9并不完全支持它们，这就导致了问题。如果您可以重新设计CSS而不使用它们，那可能会是更好的解决方案。 - adhocgeek
这似乎是由某种测量函数出了问题引起的。如果您可以为表格设置一个固定的高度，也可以解决此问题。 - adhocgeek
我相信说max-width和overflow-x不正确的人是错误的。我调查了一下，它们都得到了充分的支持。这可能就是为什么评论被删除的原因。 - JohnELaw
我的应用程序中的行数会发生变化，因此我没有固定的高度。 - JohnELaw
哼。甚至用width和overflow替换max-width和overflow-x仍会导致错误，令人惊讶。添加任何额外的属性到hover样式都会导致它发生...非常奇怪的bug，可能比尝试找到解决方案更容易设计解决。 - adhocgeek
1
采用adhocgeek的建议，我使用了固定高度。给对象分配了ID，并在加载时运行了这个JQuery。感觉有点hacky，但现在它能够工作了。我需要添加30来为滚动条留出空间。
$("#testScroller").height($("#testTable").height() + 30);

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

如果将高度设置为自身，则可以解决该问题。

$("#testScroller").height(($("#testScroller").height()))
我还发现，如果在加载时将高度设置为当前高度，则问题得到解决。 $("#testScroller").height(($("#testScroller").height())); - JohnELaw
1
我在IE 11中遇到了鼠标悬停时调整大小的问题。为了解决这个问题，我将overflow: scroll;更改为overflow-y: scroll;，然后它就可以正常工作了。 原因是IE 11不支持两个值的overflow简写形式。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接