css – 在IE6中链接样式行为

前端之家收集整理的这篇文章主要介绍了css – 在IE6中链接样式行为前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在跨不同浏览器测试样式表时遇到了这个问题,包括IE6(是的,我知道..)
<head>
<style>
  a:link,a:visited,a:hover,a:active { font-weight: bold; color: #000; text-decoration: underline }
  .myclass a { color: red; text-decoration: none; }
</style>
</head>
<body>
<p>This is a <a href="1">test</a></p>
<div class="myclass">
<p>This is a <a href="2">test</a></p>
</div>
</body>

结果:

>在IE6中,.myclass规则仅适用于未访问的链接状态
>在其他浏览器(FF,Chrome)中,.myclass规则适用于所有链接状态

我认为IE6是错误的,没有指定伪类的.myclass a应该适用于所有链接状态.但是我遇到了this SO question,它说a相当于a:link.这将符合IE6中的行为.但是我找不到任何证实这一点的官方参考.

哪一个是对的?

更新:

评论中所述,上述问题的已接受答案已经更新.

解决方法

其他浏览器是对的; IE6错了.

选择器a应该与任何< a>匹配.元素,而a:链接仅匹配< a>未访问的超链接元素(HTML 4文档类型将超链接定义为带有href属性的< a>元素).在任一规范中都没有说明a应该自动转换为:link,反之亦然.

由于没有这样的翻译,你的两个CSS规则具有同样特定的选择器(你的类选择器与你的每个伪类具有相同的特异性).因此,您的第二条规则应该覆盖任何< a>的第一条规则. div.myclass中的元素,无论它们的链接状态如何,从而使它始终为红色且没有文本修饰.

顺便说一句,当您使用< a>进行测试时,IE7也无法应用font-weight:bold样式. div.myclass中的元素不是链接,即使它应该是因为第二个规则中没有重写字体权重样式:

<div class="myclass">
<p>This is a <a href="2">test</a></p>
<p>This is a <a>test</a></p> <!-- does not bold on hover in IE7! -->
</div>

猜你在找的CSS相关文章