出于某种原因，当我在带有滚动条的 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>
最佳答案
你应该添加:
.testScroller {
overflow-x: auto;
min-height:0% /* IE9 fix */
}
查看此链接了解详情
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
关于html - 为什么带滚动条的 div 在悬停时调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13402180/