博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css去掉a标签点击后的虚线框
阅读量:6705 次
发布时间:2019-06-25

本文共 795 字,大约阅读时间需要 2 分钟。

outline是css3的一个属性,用的很少。

声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。

outline控制的到底是什么呢?

当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果,所以看不到。

这个就是a标签被聚焦后出现了虚线框,也就是outline;

基本上这个是没有用的效果,大多数情况下我们会希望不要出现这种效果,于是给a标签设置outline:none;很遗憾的是,ie6、7和遨游浏览器里都不能实现,只有ff,ie8在加了outline:none后会取消聚焦的虚线框。所以我说这个Outline属性基本就是一个费属性。

怎么样才能取消这个虚线框呢?常用方法有三种:

1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框。

这里设置聚焦时触发blur();强制取消焦点。自然是屡试不爽。

2:在a标签里嵌套其他标签,比如span 或者var等等,把内容放在被嵌套的标签里。这时候点击这个链接,聚焦的是a的子标签,自然不会聚焦在a标签上,所以也能避免这个问题。

3:不适用a标签做链接,采用其他标签,使用js做出hover的效果,在css里加入cursour:pointer;设置鼠标以上时变小手。给用户是链接的错觉。使用js做点击时的页面跳转等。最大的缺点是对se友好性比前两种差很多。

这三种方法的共同点是比较麻烦,相比较而言,推荐第一种,第二第三也视不同的情况而定。也是会用到的。

我认为outline的这个效果时浏览器迟早要取消掉的,所以关于这个属性的知识也相当的鸡肋。

或者还可以在css中加入“

转载地址:http://qsflo.baihongyu.com/

你可能感兴趣的文章
直送入主站问题总结
查看>>
Gartner 2106十大信息安全技术
查看>>
IOS项目自动生成技术文档很方便实用
查看>>
Python的并发编程工具包 Pykka
查看>>
Blender的插件开发-Panel面板
查看>>
为什么使用boost编程
查看>>
mysql语句:SET NAMES UTF8
查看>>
RHEL5.5_x64安装Oracle_11g_R2(用于vCenter数据库)-2
查看>>
我的友情链接
查看>>
2009年十大WordPress CMS主题
查看>>
linux服务器管理系统 wdcp v2.1版本发布
查看>>
我的友情链接
查看>>
mysql数据库课堂笔记2
查看>>
html5shiv测试demo
查看>>
uiimage截取一部分, iOS6/7 deltas
查看>>
MongoDB 3.6高可用集群(分片技术)
查看>>
开发Node.js应用最佳IDE Top 10(下)
查看>>
MFC界面库BCGControlBar v25.2新版亮点:Dialogs和Grid控件等
查看>>
llinux文本处理工具
查看>>
Linux 操作命令 tail
查看>>