FIREFOX/CHROME点击出现虚线框的问题 a标签点击虚线框 input蓝色外边框 input点击虚线框

1、解决标签a点击出现虚框

当a标签获得焦点的时候，a标签的周围就会出现虚框，它不同于border，不占任何宽度，a失去焦点的时候就会消失，就是outline。

在遨游，Firefox ，IE的几个版本中就会看到、而Safari、Opera、Google 本身不支持这个效果，就看不到。

解决方法： 可以给a标签设置 outline: none;但在IE6、IE7 遨游中都不能实现。只有在IE8、Firefox中才会消除虚框。

a、在a标签中加入js控制，当a标签活的焦点是就强制取消焦点。<a href="#"  οnfοcus="this.blur();"></a>,这里设置聚焦时触发blur()，强制取消焦点。

b、在a标签里面嵌入其他标签，如span ，这样点击时，嵌套的标签活的焦点，a标签自然就不会出现虚框。

c、不用a标签做链接，采用其他标签，用js控制实现点击跳转。

 

2、标签input获得焦点自动显示外边框的问题

方法1.     <input  type="text"  style="outline:none"  id="input_id">

方法2.   $("#input_id").focus(function(){
                    $(this).css("outline","none");
               });

 

3、firefox的input button点击获得焦点时的虚线框

这是由于按钮获得焦点的样式造成的，解决办法有：

1、设置  :focus{ outline: none; } 属性，但IE6、 7并没有用，似乎在一些Firefox浏览器上也没用

2、设置 ::-moz-focus-inner{ border: 0; }属性，Firefox有效,此处设置的不是outline，是border

3、最简单粗暴的方法 jq 基础下 $(this).blur(); 使其主动失去焦点，不用考虑浏览器问题，麻烦的是需要每个作用对象下执行