css - 使用带有样式链接的 IE8 的意外 CSS 结果

Question

我已经使用 CSS 设置了链接样式，如下例所示。

这在 Chrome 中按预期工作，但是在 IE8 中我遇到了这个问题:

当您第一次访问该页面时，所有链接都没有像预期的那样带有下划线。

如果我将鼠标悬停在它们上面，它们会按预期显示下划线。

如果然后访问链接，下划线会按预期消失，但是如果我再次将鼠标悬停在它们上面，我就不会再看到下划线了。

任何想法...？

谢谢

a:link {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}     
a:active {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}     
a:hover {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:underline !important;}  
a:visited {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}  

Answer 1

您的问题是因为您的链接未在 LVHA order 中设置样式。 .你应该用 :link 来设计它们首先，然后 :visited , 然后 :hover , 然后 :active以获得一致的跨浏览器结果。

此外，任何应用于 :link 的样式不需要重新应用到 :visited , :hover , 或 :active除非你想用不同的值覆盖它。例如，当您声明 text-decoration:none对于 :link ，除了 :hover 之外，您无需将其放入任何其他定义中，您想将其覆盖为 none .因为除了 :hover 之外的所有样式是一样的，你可以绕过这里的 LVHA 命令:

a:link, a:visited, a:active {
    color: #0064cc;
    font-family: Arial;
    font-size: 13px;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

希望这对您有所帮助!

编辑

尽管您的问题与您对 !important 的使用无关，通常最好避免使用它。它会导致一些非常非语义的 CSS。最好全面了解 CSS 选择器的应用顺序(它并不像您想象的那么简单!)。查看 MDN 的 documentation了解更多信息。