IE8错误 - CSS“a：hover”属性不工作

问题描述

我有一个锚点链接的列表有关联：hover属性 - 真的很简单。 CSS在IE7和所有其他浏览器，但不是在IE8中正常工作。

I have a list of anchor links that have associated :hover attributes - really simple. The CSS works fine in IE7 and all other browsers, but not in IE8.

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

我试图将我的doctype声明从HTML5更改为HTML4 strict，

I tried changing my doctype declaration from HTML5 to HTML4 strict and nothing changed - any ideas?

谢谢！

编辑：关联的HTML：

associated 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中有效，

Again, to be clear, this works in IE7 but NOT in IE8, which is the confusing part...

这个问题是由于 .header-nav ul li a 标签...我不知道为什么IE8无法处理这个（和IE7可以！）。我的修复是模拟相对定位，只是让line-height属性更大（并添加一个*行高来解释IE7渲染中的差异）。

This issue was due to the position:relative on the .header-nav ul li a tag... I have no idea why IE8 couldn't handle this (and IE7 could!). My fix was to simulate the relative positioning by just making the line-height attribute larger (and adding a *line-height to account for differences in the IE7 rendering).

如果任何人有任何洞察为什么这个问题，我很想听到它！

If anyone has any insight on why this issue was caused I'd love to hear it!

希望这有助于未来困惑的前端开发商，的IE ...

Hope this helps future confused front-end devs that are stuck accounting for older versions of IE...

这篇关于IE8错误 - CSS“a：hover”属性不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！