怎么删除A链接点击后的虚线框啊？

Question

A链接点击以后会有一个虚线框，特别难看，有没有什么方法可以去掉这个虚线框啊？求大神指教。

Answer 1

去除链接虚线框的推荐方法是：IE下用hidefocus属性，Firefox/Chorme/Opera/Safari下用outline:none。

<a href="#" hidefocus="true">链接</a>

a:focus {outline-style:none; -moz-outline-style: none;}

Answer 2

我发现 Safari 和 Chrome 浏览器下，当输入框得到焦点时边框会出现阴影效果，也可以通过上的这些方法去除。

input, textarea{outline:none;}

Answer 3

a{blr:expression(this.onFocus=this.close());} /* 只支持IE，过多使用效率低 */ 　
a{blr:expression(this.onFocus=this.blur());} /* 只支持IE，过多使用效率低 */ 　
a:focus { -moz-outline-style: none; } /* IE不支持 */

Answer 4

IE浏览器可以在元素标签中添加hidefocus属性解决，FF浏览器 <a/> 标签可以通过CSS2.0规范样式属性 outline 来设定线框样式。

<button/> 没有 outline 样式，但是可以通过 ::-moz-focus-inner 来设定线框样式，这个是FF私有伪类，注意是两个冒号。

如过非要在IE和FF下隐藏线框可以这样写

a.hidefocus{outline:none;} //无轮廓
button.hidefocus::-moz-focus-inner{border:none;} //::-moz-focus-inner无边框

<a herf="#" class="hidefocus" hidefocus>点击我无虚线</a>//hidefocusIE下的元素属性
<buttonclass="hidefocus"hidefocus>点击我无虚线哦</button>

如果页面中的 <a/> 非常多,一个一个地加上hidefocus[=true]也许会很麻烦，所以页面加载完成后，可以用JavaScript来添加这一属性，使用jQuery的页面，更是容易按需取到要设置隐藏的元素对象。

window.onload=function(){
	//something to do on window loaded
	hideFocusWithButtons();
}

functionhideFocusWithButtons(){
	varbuttons=document.getElementsByTagName('button');
	for(var i=0,l=buttons.length; i<l; i++){
		buttons[i].setAttribute('hidefocus', true);//取消隐藏虚线,把hidefocus设为false即可
	}
}

Answer 5

也许你看到的大多数网站，点击A链接时候，会出现灰色的虚线框，于是乎你认为这是很正常的事情。今天在做优化的时候发现其实没有这个虚线框页面或许会变得更美观一些，而去除这个虚线框的做法在IE和FF下是不同的。

做法如下：

a{blr:expression(this.onFocus=this.blur());} //IE下
a:focus{outline:none;} //FF下

在IE下使用的是表达式，所以会消耗一定的性能。

Answer 6

这个没必要去掉吧，本来是针对使用障碍的人设计的东西，对你没影响啊？何必那么较真？