Html Internet Explorer在使用内联块悬停锚点时变长div

我使用

inline block

将多个锚作为选项卡排列在一个选项卡条中，在溢出时水平滚动，而不是将选项卡包装成多行

这在Windows上的Chrome和FF以及iPad上的Chrome/Safari上都非常有效，但在IE9上却非常时髦

IE 9上的问题是，当我悬停锚定标记时，更改元素颜色和BG颜色的psuedo选择器会导致父div增加其高度。我假设这是一个IE9错误，但我一直无法验证

我发现了一个修复方法，它涉及到用

溢出：hidden

和特定的

高度

将父元素包装在块元素中，但如果可能，我希望避免使用特定高度

问题：

什么是不涉及IE黑客或特定宽度的通用修复

为什么只有在使用

：hover

psuedo类时才会发生这种情况

是否有更好的方法来按我想要的方式进行制表符操作（如果超出宽度，则滚动；不要环绕）

问题小提琴：
黑客修复小提琴：

示例代码：

.tabs{
显示：块；
空白：nowrap；
背景颜色：蓝色；
溢出：自动；
}
.标签a{
显示：内联块；
边框：1px实心#ccc；
颜色：#fff；
}
.a:悬停{
背景色：红色；
}

这里有一些内容

非常好。这似乎只影响Internet Explorer 9，在版本10及更高版本中解决。虽然我不完全清楚是什么导致了问题，但问题肯定是

.tabs

容器在每次通过其嵌套的

.tab

元素时的高度都会增加

解决所有浏览器问题的简单方法是对包含的元素应用

max height

。我采取的具体做法如下：

.tabs{
溢出：自动；
最大高度：100%；
空白：nowrap；
背景颜色：蓝色；
}

Hmm，我刚刚意识到我可以用

display:inline

来代替，但是我仍然想知道为什么这个“bug”只在IE@nothingisnecessary真棒的虫子！我是IE团队的工程师，我很乐意为您调查此事。谢谢！我有点高兴这是一个错误，因为没有其他解释是有意义的，我开始怀疑我的理智。IE8不受影响（没有尝试7，因为没有

内联块
支持，我们在XP end of life中停止支持它）。确认您的修复程序适用于IE 8、9、10、11、Chrome（最新版本）、FF（最新版本）以及iPad上的Chrome&Safari。（比我使用
display:inline
和
line height
来弥补填充、改变颜色等的解决方案要好得多。）