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 。由于除a:link, a:visited, a:active { color: #0064cc; font-family: Arial; font-size: 13px; text-decoration: none; } a:hover { text-decoration: underline; }之外的所有样式都相同，您可以在此处绕过LVHA订单：

!important

希望这有帮助！

修改

虽然您的问题与{{1}}的使用无关，但通常最好避免使用它。它导致一些非常非语义的CSS。最好全面了解CSS选择器的应用顺序（它并不像你想象的那么简单！）。查看MDN的documentation了解更多信息。

Answer 2

尝试按正确的顺序列出不同的选择器。

a:hover必须在a:link和a:visited之后来 a:active必须在a:hover

之后

此外，您不应使用!important。这可能会在以后引起您的问题。

Src：http://www.w3schools.com/css/css_link.asp

Answer 3

只需阅读有关CSS选择器特异性的内容，并重新排序样式规则：

http://www.w3.org/TR/css3-selectors/#specificity

尽量避免!important像魔鬼避开十字架一样。

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

3 个答案:

修改