如何使用CSS删除IE8中活动超链接周围的虚线边框

Question

活动超链接文本以虚线边框突出显示.当在这样的超链接上使用效果(fadeIn/fadeOut)时,它会产生奇怪的效果.如何禁用/删除虚线边框？

Answer 1

试试这个CSS:

a:active, a:selected, a:visited { 
    border: none;
    outline: none;
}

请注意,这必须a:hover遵循任何规则.感谢PEra在评论中建议使用a:selected选择器.

注意

上面并没有在IE 9.工作卸下:选择导致它在IE9工作.

Answer 2

典型和安全的方法是:

a:active, a:focus {
   outline:  none; /* non-IE */
   ie-dummy: expression(this.hideFocus=true); /* IE6-7 */
}

由于expresssion()已经在IE8中被删除,您可能需要一个脚本:

if (document.documentElement.attachEvent)
    document.documentElement.attachEvent('onmousedown',function(){
         event.srcElement.hideFocus=true
    });

如果您要删除默认焦点轮廓,则必须为其定义自己的独特样式:focus,否则键盘用户将很难使用您的站点.

Answer 3

小心.虚线边框是键盘浏览的重要部分.它会突出显示要点击的链接.

a:active { outline: none; }

作者Nathan Smith 在他的博客上对此进行了更全面的讨论以及各种相关问题.

Answer 4

a:active, a:focus {
    outline:none;
}

Answer 5

试试这个CSS:

对于Mozilla:

|:-moz-any-link:focus { outline: none; }

|:focus { outline: none; }

button, input[type="reset"], input[type="button"], input[type="submit"] { outline: none; }

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0px 2px 0px 2px; border: 1px dotted transparent; }

对于IE8:

a:active, a:focus { 
    border:none;
    outline:none;
}