css - IE8 bug - CSS "a:hover"属性不起作用

Question

我有一个具有关联的 anchor 链接列表:hover 属性 - 非常简单。 CSS 在 IE7 和所有其他浏览器中工作正常，但在 IE8 中不行。

.header-nav ul li a:hover {
     border-bottom: 1px dotted #fff;
}

我尝试将文档类型声明从 HTML5 更改为严格的 HTML4，但没有任何改变 - 有什么想法吗？

谢谢!

编辑:关联的 HTML:

<ul>
    <li><a href="http://www.google.com/">Getting Started</a>
    </li><li><a href="http://www.google.com/">Refill</a>
    </li><li><a href="http://www.google.com/">Status</a>
    </li><li><a href="http://www.google.com/">Services</a>
    </li><li><a href="http://www.google.com/">Conditions</a></li>
</ul>

常规 CSS:

.header-nav ul {
    list-style-type:none;
    margin:0;
    padding-left:25px;
    position: absolute; 
    top: 10px;
    *top: 15px;
    left: 0;        
}

.header-nav ul li {
    display: inline-block;
    zoom: 1; *display: inline;      /* Fix for IE7 */
    padding: 0 40px;
}

.header-nav ul li a {
    text-decoration: none;
    line-height: 23px;
    font-size: 18px;
    position: relative;
    top: 7px;
    *top: 2px;  /* IE7 */
    color: #fff;    
}

再次强调，这在 IE7 中有效，但在 IE8 中无效，这是令人困惑的部分......

Answer 1

此问题是由于 .header-nav ul li a 标记上的 position:relative 造成的...我不知道为什么 IE8 无法处理此问题(IE7 可以!)。我的修复方法是通过增大 line-height 属性来模拟相对定位(并添加 *line-height 以考虑 IE7 渲染中的差异)。

如果有人对导致此问题的原因有任何见解，我很想听听!

希望这可以帮助 future 困惑的前端开发人员，因为他们无法解释旧版本的 IE...