html - Internet Explorer 在使用内联 block 悬停 anchor 时增长 div

Question

我使用 inline-block 将多个 anchor 排列为标签条中的标签，标签条在溢出时水平滚动，而不是将标签换行到多行。

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

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

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

问题:

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

问题 fiddle :http://jsfiddle.net/oyzpxr6m
黑客修复 fiddle :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;
}