前端开发小技巧——取消a标签点击之后的虚线框
2016-12-09 21:57
381 查看
什么是a标签点击之后出现的虚线框?
如图所示,当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然消失。
这个就是a标签被聚焦后出现了虚线框,也就是outline;
你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果,所以看不到。
*注:下图为同样的内容在谷歌浏览器中的样式,显然并没有虚线框!
关于这个属性,大多数情况下我们会希望不要出现这种效果,因为没有什么实际的用处,更重要的是并不美观,于是给a标签设置outline:none;但是是,ie6、7和遨游浏览器里都不能实现,只有ff,ie8在加了outline:none后会取消聚焦的虚线框。
如何有效的在各种浏览器中实现取消掉这个虚线框,有三种方法:
1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框。
2:在a标签里嵌套其他标签,比如span
或者var等等,把内容放在被嵌套的标签里。这时候点击这个链接,聚焦的是a的子标签,自然不会聚焦在a标签上,所以也能避免这个问题。
3:不适用a标签做链接,采用其他标签,使用js做出hover的效果,在css里加入cursour:pointer;设置鼠标以上时变小手。给用户是链接的错觉。使用js做点击时的页面跳转等。最大的缺点是对se友好性比前两种差很多。
其中方法一是最为好用的一种
关于outline属性,这里可以查看官方文档这个属性本身是没有太大用处的css属性,所以并不重要。
如图所示,当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然消失。
这个就是a标签被聚焦后出现了虚线框,也就是outline;
你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果,所以看不到。
*注:下图为同样的内容在谷歌浏览器中的样式,显然并没有虚线框!
关于这个属性,大多数情况下我们会希望不要出现这种效果,因为没有什么实际的用处,更重要的是并不美观,于是给a标签设置outline:none;但是是,ie6、7和遨游浏览器里都不能实现,只有ff,ie8在加了outline:none后会取消聚焦的虚线框。
如何有效的在各种浏览器中实现取消掉这个虚线框,有三种方法:
1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框。
<a href="#" onfocus="this.blur();">这里设置聚焦时触发blur();强制取消焦点。
2:在a标签里嵌套其他标签,比如span
或者var等等,把内容放在被嵌套的标签里。这时候点击这个链接,聚焦的是a的子标签,自然不会聚焦在a标签上,所以也能避免这个问题。
3:不适用a标签做链接,采用其他标签,使用js做出hover的效果,在css里加入cursour:pointer;设置鼠标以上时变小手。给用户是链接的错觉。使用js做点击时的页面跳转等。最大的缺点是对se友好性比前两种差很多。
其中方法一是最为好用的一种
关于outline属性,这里可以查看官方文档这个属性本身是没有太大用处的css属性,所以并不重要。
相关文章推荐
- a标签点击之后,会有虚线框存在的问题
- (礼拜三log)前端开发,c foreach 标签 & 点击空白处时禁止Bootstrap模态框消失 & javascript的DFS算法
- a标签点击之后,会有虚线框存在的问题
- a标签点击之后有个虚线边框,怎么去掉
- web前端开发中button标签点击后导致页面刷新
- ios开发 点击文本(TextField)输入的时候向上推以及输入之后恢复的动画
- 去掉A标签点击后的虚线
- 防止网页中a标签在点击时出现虚线
- 貌似是腾讯的web前端开发的题目:要求实现表格数据点击后循环移动
- 前端开发中常见的HTML5标签乱用案例
- ios开发,用户登录界面,输入用户名之后点击Next后切换到密码输入框,密码输入框输入后点击Return,键盘回收
- 移动前端开发 解决点击 input 默认高亮 边框
- 移动平台前端开发的webkit内核中的一些私有的meta标签
- 隐藏鼠标点击&lt;a&gt;标签后的虚线
- a标签如何去除点击链接时出现的虚线框
- a标签点击时去虚线
- css清除a标签点击后虚线边框问题
- 关于去掉a标签点击后的虚线框问题
- 去掉a标签点击后产生的虚线框
- 前端开发需要注意的textarea标签