A标签常见兼容性问题.pdfVIP

AA标签常见兼容性问题标签常见兼容性问题 标签标签 ：a,link,visited,hover,active,href,font,specificity,特殊性,L-V-H-A 操作系统版本：操作系统版本： Windows 7 Ultimate build 7600 浏览器版本：浏览器版本： IE6 IE7 IE8 Firefox 3.6.2 Safari 4.0.4 Chrome 5.0.356.2 dev 受影响的浏览器：受影响的浏览器： 所有浏览器 本文目录本文目录 本文目录本文目录 1 一、关于A标签的说明 1 二、差异及可能产生的问题 2 1、A标签伪类书写顺序 2 2、A标签伪类选择器特殊性计算 2 3、A标签缺失href属性后，伪类是否依然有效4 4、A标签嵌套Font标签后字体和下划线的颜色5 三、如何避免受此问题影响 5 一、关于一、关于A标签的说明标签的说明 1、A标签是web应用中重要的核心标签之一，它有两个常用的用途： ◦ 作为锚点：定义页面上的一个锚点，可通过其它A标签的href属性访问。 ◦ 作为链接：导航到A标签href属性所指定的目标地址（URI地址、或同一文档的锚 点） 2、A标签的渲染，有四个常用的伪类，如下： ◦ :link ：适用于未被访问的链接。 ◦ :visited ：适用于已经访问过的链接。 ◦ :hover ：在可视化客服端上，适用于光标（鼠标指针）指向一个元素，但还未激 活它时。 ◦ :active ：适用于一个元素被用户激活时。 3、A标签最常用的属性，莫过于href。绝大多数情况下，A标签都是作为链接来使用的，此时必须 定义href属性，如果缺乏，将被视为普通标签。 关于A元素的更多信息，请参考 w3c html401 文档第 12.2 节 关于链接伪类的更详细信息，请参考 w3c css21 文档第 5.11.2 节 关于动态伪类的更详细信息，请参考 w3c css21 文档第 5.11.3 节 二、差异及可能产生的问题二、差异及可能产生的问题 在实际开发中，由于疏忽、使用不当、或其它原因，导致A标签的应用在不同浏览器下的表现存在差 异。下面枚举一些常见的现象加以分析说明： 1、、A标签伪类书写顺序标签伪类书写顺序 w3c css21规范中指出：A:hover必须放置在A:link和A:visited之后，否则将隐藏A:hover 内定义 的相同规则。同理，A:active应在A:hover之后，否则A:active 中的相同规则将被隐藏。 按照规范，正确的顺序应为：L-V-H-A。下面举一个反例，例子中A标签伪类的顺序为 H-L-V-A ，观察 其在各浏览器下的表现，代码如下： style type=text/css a :hover{background-color:red;} a :link{background-color:yellow;} a :visited{background-color:blue;} a :active{background-color:green;} /style a href=#put your mouse on/a 从代码中看，在鼠标未置上A链接时，A链接应用“a :link”中的规则（背景为黄色），当鼠标置上后， “a :hover”中的规则被应用。然而由于“a :hover”在“a :link”前出现，按照标准，“a :hover”中的背景 规则被隐藏。下面我们来观察以上代码在各浏览器下的表现，是否遵循w3c css21规范中的L-V-H-A 顺序规则： IE6(S)(Q)/IE7(Q)/ IE7(S)/IE8(S)/Firefox(S)(Q)/Chrome(S)(Q)/ IE8(Q)