去除IE和Firefox中链接的虚线框

38,979

在IE和Firefox下，点击超链接时会产生一个虚线框，
虽然几乎所有的网站都会有，
可是个人觉得非常影响美观（在Chrome和Opera中没有）
细心的同学可能早就发现了，点击whisperer.name上所有的链接是没有这个恶心的虚线框的。
下面我就介绍一下如何在WordPress中实现消除链接元素周围的虚线框。
Firefox中的虚线框很好去除。对于IE浏览器，我们用.htc的脚本文件来解决这个问题。
1、把下面代码保存为一个扩展名为.htc的文件（或者直接下载我的文件）：

<public:attach event="onfocus" onevent="example()"/>
<script language="javascript">
function example()
{
this.blur();
}
script>

把这个文件上传到你的网站上，得到一个地址。
2、修改你当前主题的style.css文件，追加以下代码：

a {behavior:url(你的.htc文件地址)}  /*去除IE中的链接虚线框*/
a:focus{outline:0;}  /*去除Firefox中的链接虚线框*/

保存之后就可以了，享受没有虚线框束缚的美感吧。
PS：后来发现这个方法有一个很大的缺点，具体见下面8#的评论。
这里还有另外一个方法，用jQuery实现，方法来自willin

$('a,input[type="submit"]').bind('focus',function(){if(this.blur){ this.blur();}});

顺便说，如果用 noConflict, $ 要还原 jQuery, 不能用 $，$(’a,input[type="submit"]‘)…..要改成 jQuery(’a,input[type="submit"]‘)…..

22条评论


  1. 很实用！


  2. 挺实用！


  4. 这个方面很新鲜，第一次见识，谢啦


  6. @whisperer
    我已经用上啦，嘿嘿，等会还要转载下，好东西

  7. Mod

    我发现这篇文章用IE发表评论会提示错误

  8. Mod

    @万戈
    囧 你用上了我才发现一个问题 这个方法有很大的缺点啊
    用IE打开页面的时候状态栏会显示还有xx项，居然有上百项
    记得昨天我在论坛上问的问题么
    看样子它要逐个给每个连接加载这个效果


  9. @whisperer
    你不说我也没注意，不过加载速度也不是很慢啊


  11. @whisperer
    稍微影响1、2秒我也不介意，有虚线框实在让人恶心，去掉干净多了



  15. @万戈
    expression，嗯，我试过，但是据说这个expression本身有缺陷，也很耗资源..我去感受下你的


  16. @whisperer
    是什么缺陷呀，我不太了解。。。
    另外，经willin大师提点说，还有JS的方法，但个人不太喜欢用JS，所以也没试过



  19. FF下在CSS中加outline:none可以去除<a>的虚线框。如果你不在乎是否通过W3C验证的话，IE6,7下可以在<a>内加私有属性hidefocus。


  20. 留言，飘过。文章有点纠结、

Comments are closed.