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

Question

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

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

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

谢谢!

编辑:相关的 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 中......