去掉链接a标签外的虚线框

方法一：

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

做法如下：

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

a:focus{outline:none;}//FF下

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

参考网址：http://www.cnblogs.com/svage/archive/2011/03/21/1990576.html

方法二：

IE下: 在元素标签中添加  hidefocus 属性

FF下:  <a/> 标签可以通过 CSS2.0 规范样式属性  outline 来设定线框样式

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

如, 要在IE和FF下隐藏线框, 可如此

<style type="text/css" >

a.hidefocus  { outline: none; }   //无轮廓

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

</style>

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

<button class="hidefocus" hidefocus >点击我无虚线哦</button>

如果页面中的<a/>非常多, 一个一个地加上 hidefocus[=true]也许会很麻烦,

所以, 页面加载完成后,可以用js来添加这一属性(使用jquery的页面, 更是容易按需取到要设置隐藏的元素对象)

window.onload = function(){

//  something to do on window loaded

hideFocusWithButtons();

}

function hideFocusWithButtons(){

var buttons = document.getElementsByTagName('button');

for(var i=0,l=buttons.length; i<l; i++){

buttons[i].setAttribute('hidefocus',true);     //取消隐藏虚线, 把 hidefocus 设为 false 即可

}

}

方法三： http://www.jb51.net/css/40173.html

方法四：去掉A标签点击链接自动产生的虚线边框(兼容FF)

去除虚线框的方法优劣兼容性是否中断tab

<a href=”#” onfocus=”this.blur()”>this blur</a>链接聚焦触发时失去焦点，js和html耦合在一起无是

a:focus {outline:none; -moz-outline:none}outline由css2.1引入，去除虚线框视觉上的问题正是css的职责ie6/ie7不支持,ie8+/ff /safari/opera[2]支持否

<a href=”#” hidefocus=”true” >hidefocus</a>该属性是ie的私有属性[3]ie5+支持否

a{blr:expression(this.onFocus=this.close());}

a{blr:expression(this.onFocus=this.blur());}

可批量处理，但expression的性能问题不能忽视expression ie6/7支持，ie8+、非ie不支持是

综合以上，去除链接虚线框的推荐方法是：

ie下用hidefocus属性，ff/chorme/opera/safari下用outline:none。

即:<a href=”#” hidefocus=”true” >链接</a>

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