a标签点击后的虚线框问题
以前一直用的方法都是:
a {outline: none;star:expression(this.onFocus=this.blur());}
后来发现有瑕疵,不完美。体现在页面调用JS动作比较频繁的情况下,页面很卡~~~半个月内遇到两次这个问题,都是自己公司的平台。而网上却没有关 于这个的说法·~~而大家也都是按部就班,我不得不写一写。
解决办法就是写成这样:
a:active {outline: none;star:expression(this.onFocus=this.blur());}
有 的人怀疑,未什么不直接写在a里呢,为什么不这样写呢a {outline: none;star:expression(this.onFocus=this.blur());}, 这样不是可以包含了所有的A了吗?其实这样理论上是对的,原来我也这么用,原来也发现没什么问题,可最近在做另一个项目的时候,页面调用的JS比较多,问 题就来了~整个页面会很卡,起初找不到原因,一直抓狂~~~后来一个个排除原因,最终找到罪魁祸首竟然是CSS样式表·~~
因 为如果写在A里,那么不管是鼠标放上,鼠标点击,还是默认,都会执行 star:expression(this.onFocus=this.blur());, 这个代码相对于IE来说就是一个CSS的动作调用,和JS原理一样,页面资源耗不起啊,也算是IE的BUG吧~~~我们实现的效果是要点击的时候没有虚 线,所以就写在a:active里就可以了,意思就是点击时才执行,才去掉虚线框。这样鼠标在放上A和默认的情况下就不会卡。
要同时兼容IE和火狐浏览器,样式直接写成以下就可以:
a {outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
也可以单独写:
===IE===
为链接添加onFocus事件
if(this.blur)this.blur()或者用IE的私有属性hideFocus="hide";
===Firefox===
添加CSS
:focus{outline:0}
该CSS可以作为全局存在,即在样式表中单独存在一行该代码即可时全页面的链接不带有虚线框
===Chrome, Safari===
这两个浏览器在点击链接时本身没有虚线框
===Jquery框架===
如果你使用Jquery框架的话,可以添加以下代码即可实现(raycross 提供)
$(“a”).bind(“focus”,function() {
if(this.blur) {this.blur()};
});
最终我的用法是在CSS文件直接加入:
a {outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
:focus { outline:0; }
如果页面上只有一两个链接的话,直接加到<a>里面也行,就像这样
<a href=”#” onFocus=”this.blur()”><img src=”logo.jpg” border=0></a>
a标签点击后的虚线框问题的更多相关文章
- css去掉a标签点击后的虚线框,outline,this.blur()
css去掉a标签点击后的虚线框,outline,this.blur() outline是css3的一个属性,用的很少.声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outl ...
- css去掉a标签点击后的虚线框
outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...
- css去掉a标签点击后的虚线框(转自网络)
outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...
- 【工作笔记四】去掉a标签超链接的虚线框的方法
a{ blr:expression(this.onFocus=this.blur()); /* IE Opera */ outline:none; /* FF Opera */ } a:focus{ ...
- IE10中KendoUI treeview 点击后出现虚线框的解决方案
在head中添加:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 修改渲染模式即可.
- 去掉a标签点击后的虚边框
a { cursor: pointer; text-decoration: none; hide-focus: expression(this.hideFocus=true); outline: no ...
- html a标签 图片边框和点击后虚线框的有关问题
html a标签 图片边框和点击后虚线框的问题 一直在在chrome上开发自己的项目,今天上ie和firefix一看,真丑,a标签在使用图片时,多加了蓝色的边框,并且点击后所有a标签都会出现一个虚线框 ...
- 去掉点击a标签时产生的虚线框
1.直接给a 标签添加属性:onfocus="this.blur()" 即可 For Example: <a onfocus="this.blur()" ...
- 去掉A标签的虚线框
outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...
随机推荐
- Helpers\URL
Helpers\URL The URL class is used for having handy methods or redirecting the page and returning the ...
- PHP笔试题汇总
1.抓取远程图片到本地,你会用什么函数? fsockopen, A 2.用最少的代码写一个求3值最大值的函数. function($a,$b,$c){* W0 z* u6 k+ e. L a: }5 ...
- hdu 4284 深度优先搜索
思路:就是找能走的走,遍历一边所有情况,满足就退出. Accepted 4284 328MS 2280K 2239 B C++ //#pragma comment(linker, "/STA ...
- saltstack实战3--配置管理之YAML语法
本文来自如下链接http://docs.saltstack.cn/topics/yaml/index.html 了解YAML 默认的SLS文件的renderer是YAML renderer.YAML是 ...
- 谈谈JavaScript事件
众所周知,web前端包含三个基本技术:html.css和javascript.三者融合,才让网页变得精彩纷呈!如今,web上的操作越来越趋于复杂,JavaScript事件在网页中也遍地开花,有时候也是 ...
- JS的第一节课
javascript中有两个非常重要的数据类型是对象和数组. e.g: var book={ topic:"javascript", fat:true };
- HTML5和Web Apps框架和方法
单页: 1jQuery Mobile 该框架以其基于AJAX的导航系统和可使用主题的ThemeRoller设计而闻名.支持Android,ios,Windows Phone,webOs等.编程模式为C ...
- Jersey(1.19.1) - Client API, Using filters
Filtering requests and responses can provide useful functionality that is hidden from the applicatio ...
- Nginx - Configuration File Syntax
Configuration Directives The Nginx configuration file can be described as a list of directives organ ...
- iOS动画——弹窗动画(pop动画)
用pop动画简单实现弹窗的缩放和渐变,感觉这个动画常用,就写一下博客 pop动画是Facebook推出的动画引擎,请自行到GitHub上搜索下载拖拽导入xcode项目中. 更多pop动画使用和原理可网 ...