css去掉a标签点击后的虚线框

野性酷女 2021-09-26 14:18 340阅读 0赞

# [css去掉a标签点击后的虚线框][css_a] #

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标签自然不会有虚线框。

**<a href="\#" οnfοcus="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());\}**

[css_a]: http://www.cnblogs.com/something/archive/2013/05/21/3090428.html

发表评论取消回复

表情：

评论列表（有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS_css去掉input标签的默认样式，去除input点击样式

去掉input标签的默认样式，去除input点击样式 outline: none; input { background: none;

小咪咪/ 2022年11月11日 05:17/ 0 赞/ 193 阅读

相关超链接 a标签虚线框虚线去除虚线框

当一个链接得到焦点时，默认会有个虚线框。如图： ![链接虚线框][hide-link-outline.gif] 在 Firefox 里可以用 -moz-outline:no

短命女/ 2022年09月30日 03:54/ 0 赞/ 160 阅读

相关 QPushButton去掉选中状态的虚线框(焦点框)

原文出自博客： [http://www.hookr.cn/implement-qt-switched-to-the-relevant-page-the-correspondi

ゝ一世哀愁。/ 2022年08月21日 04:45/ 0 赞/ 656 阅读

相关匹配url后的参数（模拟a标签点击定位）

functiongetQueryString(name) \{ var reg = newRegExp("(^|&)" + name + "=(\[^&

╰+攻爆jí腚メ/ 2022年05月27日 01:21/ 0 赞/ 109 阅读

相关去除a标签、input标签点击时出现的虚线框

$("a").focus( function() \{ this.blur(); \} ); $("input:radio").focus( funct

清疚/ 2022年05月19日 10:43/ 0 赞/ 195 阅读

相关点击a标签触发点击事件后下载文件

a标签 <a></a> a标签下载文件 <a download="filename" id="a_downloadPdf" href="文件地址">点击下载</a

太过爱你忘了你带给我的痛/ 2022年05月16日 13:23/ 0 赞/ 599 阅读

相关 CSS伪类，a标签超链接实现点击后变色

CSS伪类，a标签超链接实现点击后变色一、html 代码如下 <a href="http://

左手的ㄟ右手/ 2021年12月19日 22:01/ 0 赞/ 293 阅读

相关点击其他a标签原a标签恢复

假设有3个a标签，当点击第一个标签时，标签是一种颜色，不点击时，保持点击后的颜色，但点击其他a标签，该标签恢复颜色。 css: a{ text-d

我不是女神ヾ/ 2021年11月01日 15:10/ 0 赞/ 469 阅读

相关 css去掉a标签点击后的虚线框

[css去掉a标签点击后的虚线框][css_a] outline是css3的一个属性，用的很少。声明，这是个不能兼容的css属性，在ie6、ie7、遨游浏览器都不兼容

野性酷女/ 2021年09月26日 14:18/ 0 赞/ 341 阅读

相关 easyui 去掉按钮虚线框

![Center][] ![Center 1][] ![Center 2][] 设置css即可： <style type="text/css"> a.

àì夳堔傛蜴生んèń/ 2021年07月28日 17:12/ 0 赞/ 336 阅读