解决IE浏览器链接点击虚线框的四种方案
作者:白露时间:2026-10-28 05:17:27浏览:374
本文总结了在IE浏览器中去除链接点击后虚线框的四种常见方法。包括通过JavaScript的onfocus事件调用blur()、利用jQuery绑定焦点事件、使用CSS表达式或标准属性控制轮廓,以及通过HTML标签属性hidefocus和HTC文件实现。文章提供了具体的代码示例和兼容性说明,帮助开发者解决旧版IE的显示问题。
JavaScript事件处理方案
方法一:通过JavaScript的onfocus事件处理,具体实现如下:
代码如下:
<a href="https://www.jb51.net/" onfocus="this.blur();">设计蜂巢</a>若项目中已引入jQuery框架,可利用其事件绑定机制来实现相同效果:
Js代码
代码如下:
$('a').bind('focus', function(){
if(this.blur){ //如果支持 this.blur
this.blur();
}
});方法二:利用CSS样式实现,具体代码如下:
CSS样式控制方案
Css代码
代码如下:
a{
blr: expression(this.onFocus=this.close());
} /* 只支持IE,过多使用效率低 */
a{
blr: expression(this.onFocus=this.blur());
} /* 只支持IE,过多使用效率低 */
a:focus {
-moz-outline-style: none;
} /* IE不支持 */
:focus {
outline: none;
} /* for Firefox */方法三:利用HTML标签属性,该方法仅支持IE浏览器,具体实现如下
HTML属性与HTC行为方案
:Html代码
代码如下:
<a href="https://www.jb51.net/" hidefocus="true">设计蜂巢</a>方法四:通过HTC文件实现,具体步骤如下:
将以下代码保存为后缀名为.htc的文件
Js代码
代码如下:
<public:attach event="onfocus" onevent="quit()" />
<script language="javascript">
function quit(){
this.blur();
}
</script>CSS代码
代码如下:
a {behavior:url("htc文件")}作者最新文章
AOS.js 动画不触发怎么办?排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成:分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南:Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19
