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

2009/08/24 Add 22 comments |

在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"]‘)…..

署名-非商业性使用-相同方式共享
  1. 途牛 #comment-225
    2009/08/25 07:28  #1

    很实用!

  2. 小四 #comment-227
    2009/08/25 22:22  #2

    挺实用!

  3. whisperer #comment-228
    2009/08/26 00:12  #3

    谢两位。

  4. 万戈 #comment-230
    2009/08/26 06:01  #4

    这个方面很新鲜,第一次见识,谢啦

  5. whisperer #comment-233
    2009/08/26 13:40  #5

    @万戈
    嗯 挺不错的 用上吧 呵呵

  6. 万戈 #comment-234
    2009/08/26 13:41  #6

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

  7. whisperer #comment-235
    2009/08/26 13:41  #7

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

  8. whisperer #comment-236
    2009/08/26 14:11  #8

    @万戈
    囧 你用上了我才发现一个问题 这个方法有很大的缺点啊

    用IE打开页面的时候状态栏会显示还有xx项,居然有上百项

    记得昨天我在论坛上问的问题么

    看样子它要逐个给每个连接加载这个效果

  9. 万戈 #comment-237
    2009/08/26 14:51  #9

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

  10. whisperer #comment-238
    2009/08/26 14:58  #10

    @万戈
    嗯 倒是不怎么影响速度

  11. 万戈 #comment-239
    2009/08/26 15:00  #11

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

  12. whisperer #comment-240
    2009/08/26 15:06  #12

    @万戈
    嗯 和我想法一样~ :smile:

  13. 万戈 #comment-245
    2009/08/27 00:03  #13

    @whisperer
    找到一个用纯CSS实现IE下去掉虚线框的方法,我试了下,没有加载几百项的现象,可以测试我的网站哟,你可以参考下:
    http://hi.baidu.com/huihot/blog/item/85baa28f63e8d9f3513d92ac.html

  14. whisperer #comment-246
    2009/08/27 00:10  #14

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

  15. 万戈 #comment-247
    2009/08/27 00:13  #15

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

  16. whisperer #comment-249
    2009/08/27 00:28  #16

    @万戈
    在网上看到的,不过我也没有在你那感觉到有什么问题

    http://bbs.blueidea.com/thread-2929403-1-7.html
    http://www.cnblogs.com/kingjiong/archive/2009/06/04/1496366.html

    我在你那看到willin的代码了 我试下~

    刚输入法不起作用了,囧 重启了下

  17. Justice #comment-2142
    2009/10/30 00:22  #17

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

  18. 黑煞哥 #comment-2899
    2010/07/27 15:00  #18

    留言,飘过。文章有点纠结、

  19. zhangleifly #comment-2955
    2010/08/12 15:30  #19

    大家还可以参考下这篇文章:http://www.blueidea.com/tech/web/2009/6727.asp

  1. 2009/08/26 22:26 | #1
  2. 2009/10/14 16:23 | #2
  3. 2011/11/13 21:09 | #3