去掉A标签的虚线框

简介: outline是css3的一个属性,用的很少。 声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。 outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。

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属性基本就是一个费属性。

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

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

<a href="#" onfocus="this.blur();">测试</a>
这里设置聚焦时触发blur();强制取消焦点。自然是屡试不爽。

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

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

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

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

最近打算写点标签默认属性的有效利用方面的东西,不过越想写越觉得写的东西会很多,每每都是写点就删掉了。想从整个知识体系中抽离出一部分来单独讲,是很难的事,就像是一张网,你只讲其中一根线的话,很难让人理解知道你在讲的网,而这个网又太大了。

有空闲的时候,我会好好规划下该怎么写这些。

或者还可以在css中加入body a{outline:none;blr:expression(this.onFocus=this.blur());}

两种情况均可以。后一种比较简单。

目录
相关文章
|
3月前
Axure 母版红色怎么去除?
Axure 母版红色怎么去除?
37 0
|
5月前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
前端开发
input框点击时去掉默认的外层边框
input框点击时去掉默认的外层边框
58 0
设置按钮背景为透明去掉button按钮左右两边的留白
设置按钮背景为透明去掉button按钮左右两边的留白
ElementUI导航菜单嵌套多级折叠面板的小箭头图标bug
ElementUI导航菜单嵌套多级折叠面板的小箭头图标bug
ElementUI导航菜单嵌套多级折叠面板的小箭头图标bug
|
前端开发 JavaScript
你可能不知道的一些关于a标签的小细节
本篇文章详细介绍了关于a标签的几个小细节,也可以说是一些sao操作,完全可以在开发中使用,体验非常奈斯
255 0
你可能不知道的一些关于a标签的小细节
封装占位文字的颜色属性
封装占位文字的颜色属性
92 0
封装占位文字的颜色属性
|
前端开发
脑洞大开:如何使用CSS实现自定义圆角虚线框
在CSS中,我们常用`border`来表示一个元素的边框样式,也可以使用`border`来绘制简单的分割线。最近遇到一个项目,需要用虚线来显示元素的边框。初步一看,这不很简单嘛,一行代码搞定`border: 1px dashed #ccc`。自我感觉良好,结果UI的同事直接提刀来了,“这是我想要的效果吗,我要的是……”。没办法,还是老老实实想办法解决自定义的虚线边框。
988 1
脑洞大开:如何使用CSS实现自定义圆角虚线框
|
前端开发
html+css鼠标经过的样式变化例题
当用户移动鼠标到指定的区域或内容时,会出现什么不一样的渲染效果呢?看这篇文章一起来了解吧!
147 0
 html+css鼠标经过的样式变化例题