使用带有样式链接的IE8的意外CSS结果 [英] Unexpected CSS result using IE8 with styling links
问题描述
我已经使用CSS对链接进行了样式设置,如下例所示.
I've styled links using CSS like the example below.
这在Chrome中按预期工作,但是使用IE8,我遇到了这个问题:
This is working as expected in Chrome however with IE8 I'm having this problem:
首次访问该页面时,所有链接的下划线都没有达到预期的水平.
When you first visit the page all links do not have underline as expected.
如果我将鼠标悬停在它们上,它们将按预期显示下划线.
If I hover on them they get underlined as expected.
如果随后访问该链接,则下划线会按预期消失,但是如果我再次将鼠标悬停在其上,则不再显示下划线.
If then visit the link the underline disappears as expected however if I again hover on them I don't get the underline anymore.
有什么想法吗??
谢谢
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;}
推荐答案
Your problem comes from the fact that your links aren't styled in LVHA order. You should style them with :link
first, then :visited
, then :hover
, then :active
for consistent cross-browser results.
此外,应用于:link
的任何样式都无需重新应用于:visited
,:hover
或:active
,除非您想用其他值覆盖它.例如,当您为:link
声明text-decoration:none
时,无需将其放在除:hover
之外的任何其他定义中,在该定义中您要将其覆盖为none
.由于除:hover
以外的所有样式都相同,因此您可以在此处略过LVHA顺序:
Additionally, any style applied to :link
doesn't need to be reapplied to :visited
, :hover
, or :active
unless you want to override it with a different value. For example, when you declare text-decoration:none
for :link
, you don't need to put that in any other definitions except for :hover
, where you want to override it to none
. Since all of the styles except for :hover
are the same, you can kind of bypass the LVHA order here:
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的文档了解更多信息.
Although your issue isn't related to your use of !important
, it is generally a good idea to avoid using it. It leads to some pretty non-semantic CSS. It's better to have a comprehensive understanding of the order in which CSS selectors are applied (it's not as simple as you might think!). Check out the MDN's documentation for more info.
这篇关于使用带有样式链接的IE8的意外CSS结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!