[原创]去掉a标签的虚线框

2018-09-20 栏目:技术知识 查看()

outline是css3的一个属性,用的很少。
声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。
outline控制的到底是什么呢?
当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果,所以看不到。下面是outline的样子示例,也是我正在做的一个页面上截取出来的。
这个就是a标签被聚焦后出现了虚线框,也就是outline;
基本上这个是没有用的效果,大多数情况下我们会希望不要出现这种效果,于是给a标签设置outline:none;很遗憾的是,ie6、7和遨游浏览器里都不能实现,只有ff,ie8在加了outline:none后会取消聚焦的虚线框。所以我说这个Outline属性基本就是一个废属性。
怎么样才能取消这个虚线框呢?
在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框。
< a href="#" onfocus="this.blur();">测试< /a> 
这里设置聚焦时触发blur();强制取消焦点。自然是屡试不爽。
或者还可以在css中加入
body a{outline:none;blr:expression(this.onFocus=this.blur());}

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

(28)
(24)
郑重申明:青海达扬网络传媒有限责任公司以外的任何单位或个人,不得使用该案例作为工作成功展示!