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标签的区域周围会有 ...
随机推荐
- hive-安装0.13.1(hadoop2.2.0)
hadoop2.2.0 hive0.13.1 (事先已经安装好hadoop.MySQL以及在MySQL中建好了hive专用账号,数据创建不创建都可以) 1.下载解压 2.把MySQL驱动加入hive的 ...
- oracle数据库 PSU,SPU(CPU),Bundle Patches 和 Patchsets 补丁号码快速参考 (文档 ID 1922396.1)
数据库 PSU,SPU(CPU),Bundle Patches 和 Patchsets 补丁号码快速参考 (文档 ID 1922396.1) 文档内容 用途 详细信息 Patchsets ...
- 跟我一起学习VIM - The Life Changing Editor
前两天同事让我在小组内部分享一下VIM,于是我花了一点时间写了个简短的教程.虽然准备有限,但分享过程中大家大多带着一种惊叹的表情,原来编辑器可以这样强大,这算是对我多年来使用VIM的最大鼓舞吧.所以分 ...
- P2184 贪婪大陆
P2184 贪婪大陆 题目背景 面对蚂蚁们的疯狂进攻,小FF的Tower defence宣告失败……人类被蚂蚁们逼到了Greed Island上的一个海湾.现在,小FF的后方是一望无际的大海, 前 ...
- 【转】测试用例设计——WEB通用测试用例
现在项目做完了,我觉得还是有必要总结一下,学习到的内容.毕竟有总结才能有提高嘛!总结一下通用的东西,不管什么项目基本都可能会遇到,有写地方也有重复的或者有的是按照个人的习惯来总结的不一定都对,有不对的 ...
- Bootstrap简单Demo(2015年05月-18日)
Bootstrap的简单使用 1.Bootstrap是什么? 这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML.CSS和JS框架,用于开发响应式布局.移动设备优先的WEB ...
- 从零单排Linux – 2 – 目录权限
从零单排Linux – 2 – 目录权限 1.sync 讲内存数据跟新到硬盘中 2.执行等级init a: run level 0:关机 b: run level 3:纯命令模式 c:run leve ...
- SparkSQL之数据源
准备json文件: cat /root/1.json {"name":"Michael"} {"name":"Andy" ...
- 关于WIFI的工作模式--AP MODE/STATION MODE
wifi的concurrent mode 所谓wifi的共存模式,有以下几种: station mode + station mode station mode + ap mode station m ...
- 第二篇、微信程序尺寸rpx
微信小程序尺寸单位rpx以及样式相关介绍rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750 ...