Keep on going, never give up.

CSS中a链接风格问题

一、text-decoration:none的浏览器兼容问题

发现一个问题,SAFARI浏览器上,a链接如果加上text-decoration: none;属性,那么将会影响默认的链接手势显示,即cursor:pointer,最后把a链接的这个text-decoration:none属性去掉,SAFARI即可正常显示链接手势。CHROME、IE等浏览器则无此问题。

二、a链接属性的优先级问题

a链接属性要按如下顺序进行,否则可能会导致某些style会被覆盖。

  1. 当鼠标移过的从未访问过的链接时,该链接拥有a:link、a:hover属性
  2. 当鼠标经过曾经访问过的链接时,该链接拥有a:link、a:visited、a:hover属性
  3. 设置时,后面的属性会覆盖前面的属性定义;
  4. 所以说,a:hover定义一定要放在a:link、a:visited的后面,,

a:link,a:visited{color: #1F00C1;}
a:hover {COLOR: #1F00C1;}
a:active {COLOR: #1F00C1;}

三、针对特定浏览器指定风格

css3中-moz、-ms、-webkit各什么意思

  1. -moz:匹配Firefox浏览器
  2. -webkit:匹配Webkit枘核浏览器,如chrome and safari
  3. -moz:匹配firefox浏览器
  4. -ms:匹配ie浏览器

示例:

a:-webkit-any-link {
    color: -webkit-link;
    cursor: auto;
}

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2017 Metsky.com, All rights Reserved.