Internet Explorer 在使用 inline-block 悬停锚点时增长 div

Question

我使用inline-block 将多个锚点安排为选项卡条中的选项卡，该选项卡条在溢出时水平滚动，而不是将选项卡包装成多行。

这在 Windows 上的 Chrome 和 FF 以及 iPad 上的 Chrome/Safari 上运行良好，但在 IE 9 上非常时髦。

IE 9 上的问题是，当我将锚标记悬停时，更改元素颜色和背景颜色的伪选择器会导致父 div 增加它的高度。我认为这是一个 IE 9 错误，但我无法验证。

我发现了一个 hack 修复，它涉及使用 overflow:hidden 和特定的 height 将父元素包装在块元素中，但我想尽可能避免使用特定的高度。

问题：

1. 什么是不涉及 IE hack 或特定宽度的通用修复？
2. 为什么只有在使用 :hover 伪类时才会出现这种情况？
3. 有没有更好的做法来按我想要的方式来处理标签（如果超出宽度则滚动；不要换行）？

问题小提琴：http://jsfiddle.net/oyzpxr6m
黑客修复小提琴：http://jsfiddle.net/oyzpxr6m/1/

示例代码：

.tabs {
    display: block;
    white-space: nowrap;
    background-color: blue;
    overflow: auto;
}
.tabs a {
    display: inline-block;
    border: 1px solid #ccc;
    color: #fff;
}
.tabs a:hover {
    background-color: red;
}

  <div class='tabs'>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
    <a href='tab'>tab name goes here</a>
</div>

<h3>some content goes here</h3>

Answer 1

优秀的错误。这似乎只影响 Internet Explorer 9，已在版本 10 及更高版本中得到解决。虽然我并不完全了解导致问题的原因，但问题肯定在于 .tabs 容器在每次通过其嵌套的 .tab 元素之一时的扩展高度。

解决所有浏览器问题的直接修复方法是将max-height 应用于包含元素。我采取的具体做法如下：

.tabs {
    overflow: auto;
    max-height: 100%;
    white-space: nowrap;
    background-color: blue;
}