IE8链接背景颜色在悬停时不会改变答案

【问题标题】：IE8 link background color not changing on hoverIE8链接背景颜色在悬停时不会改变
【发布时间】：2013-09-10 19:20:30
【问题描述】：

所以，我对 IE8 中链接的悬停状态有疑问。代码如下：

<div id="navigation">
    <a href="/" class="home">Home</a>
</div>

还有 CSS：

#navigation {
    float: right;
    height: 29px;
    margin: 50px 0 0 23px
}

#navigation a {
    color: #FFF;
    float: left;
    font-size: 120%;
    height: 25px;
    margin-right: 7px;
    padding: 2px 10px;
    text-align: center;
    width: 104px;
}

#navigation a.home {
    background-color: #f4e034;
}

#navigation a.home:hover {
    background-color: #fffbd4;
}

现在，这在我测试过的所有其他浏览器（Chrome、Safari、FF、IE6 和 IE7）中都可以正常工作，只是不会改变 IE8 中悬停时链接的背景颜色。

我尝试将display: block 和display: inline-block 添加到a 元素。我还尝试在悬停标签的背景颜色之后添加!important。我还确保 CSS 中没有其他影响这一点的元素。

谷歌搜索这个问题给了我很多关于 IE8 测试版的信息，但事实并非如此。它还为我提供了菜单相关链接的答案，但事实并非如此。它为我提供了不属于背景颜色的受影响事物的答案。它给了我改变字体颜色有效的东西，但不是背景颜色（在我的情况下都不起作用）。

只是想知道是否有其他人注意到这个问题并且有他们可以提供的东西。让我知道，提前谢谢。

【问题讨论】：

好奇，你有没有试过在 :hover 状态下添加边框（或任何其他样式，如 font-weight:bold;），看看是否生效？
我想知道，删除其默认背景颜色的声明会导致它工作吗？（比如删除#navigation a.home { [...] }中包含的规则）
我在 IE8 中测试了这段代码，它运行良好。您确定其他地方没有冲突的代码吗？ jsfiddle.net/N4zUN
我检查了你的代码。它按预期工作。 http://jsfiddle.net/TvUtZ/1/
@pixelfreak @Nightfirecat @Tank @Molecule 我尝试将其他元素添加到悬停状态，即字体粗细、字体大小、边框和颜色，但没有任何效果。我还尝试删除 a.home 属性，但它仍然无法正常工作。我用页面上的所有代码更新了这个 jsFiddle link，包括所有的 CSS。它确实似乎可以在 jsFiddle 上运行，但它绝对不能在我的页面上运行，这就是该页面上的所有内容。

标签： html css internet-explorer-8 hover

【解决方案1】：

我遇到了和你一样的问题。我和你一样尝试了各种方法，但没有用。

我的最终解决方案是在您需要悬停的元素上设置背景颜色，然后它就起作用了。

当时我很震惊，不知道为什么到现在。

【讨论】：

【解决方案2】：

您的 HTML 页面上是否指定了 DOCTYPE？这似乎很明显，但我在 IE8 中的 :hover 状态也遇到过类似的问题——尤其是在编辑旧网站时。

我的解决方案是在 HTML 页面的开始 HTML 标记上方添加 DOCTYPE

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 过渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

我希望这会有所帮助！

【讨论】：