您的位置: INN823.com - 探讨 - 去掉页面中点击链接留下的虚线框

去掉页面中点击链接留下的虚线框

以前都不知道有这样一个功能,又一次看别人网站时发现了那网站里的链接点击后都没有虚线,觉得这样蛮好的,感觉很干净和精致,所以就网上找了些资料测试,还真有效,测试通过了IE8,FF,Chrome浏览器,不过IE6的还没测试,自己也没有电脑装有IE6.

方法一:定义样式outline:none即可,但此法只适应于FF,IE不支持,在IE 下可使用其私有的html属性:hideFoucs,在标签的结构中加入 hidefocus=”true” 属性。

<a href=”#” hidefocus=”true”> 这里放置您需要的文字或图片</a>

方法二:针对于IE

.HideFocus {
hide-focus: expression(this.hideFocus=true);  /* for ie 5+ */
outline: none;  /* for firefox 1.5 + */}

但是expression性能极差,如果不是特别需求,全部页面链接点击所产生的虚线框都必须去掉,尽量不要用这种方法。

进一步了解一下点击链接产生的虚线框,其实就是 CSS 中的 outline 属性,这也说明 IE 和 Firefox 对于 outline 和 border 的解析范围并不一致:IE 认为虚线框就是border的边缘,而 Firefox 则认为虚线框应该是文字范围。

From: Reprinted

发表评论