在常规情况下,该虚线框是作为一种提示让用户明确当前关注的东西,然而如果我们把链接的4种状态样式设置比较完整的话,就不是特别需要虚线框的存在,因为它很有可能影响页面的美观。尤其是在做应用系统界面的时候,总给人一种浏览网页的感觉,显得不够专业。
当然,如果全盘否定掉链接虚线框,对使用键盘的用户体验可能又是个大弊端,但这是另外一个话题了。
下面介绍几种去掉链接点击时虚线框的方法:
方法一:利用javascript的onfocus事件,实现如下:
<a href="#" onfocus="this.blur();">链接</a>
如果引入了jQuery框架则可以利用它的事件绑定机制:
$('a').bind('focus', function(){
if(this.blur){ //如果支持 this.blur
this.blur();
}
});
方法二:利用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 */
方法三:利用标签属性,仅支持IE,实现如下:
<a href="#" hidefocus="true">链接</a>
方法四:利用Web行为
IE从5.5版本开始支持Web行为的概念。这些行为是由后缀名为.htc的脚本文件描述的,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX控件)来完成这个功能。Web行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML行为库栏目里提供了几个定制的Web行为:WebService行为。
讲一下代码保存为.htc后缀的文件
<public:attach event="onfocus" onevent="quit()" />
<script language="javascript">
function quit(){
this.blur();
}
</script>
然后,在需要去除超链虚框的页面的<head>和</head>之间加入:
<style type="text/css">
a {behavior:url("htc文件")}
</style>
如果页面已经有了style标签,只需要将 a {behavior:url("htc文件")} 一句插入里面即可。
分享到:
相关推荐
总结以上方法,我们可以看到虽然去除链接虚线框的需求很常见,但是实现的方法各有优劣,需要根据目标浏览器和项目需求来选择最适合的方案。需要注意的是,移除虚线框可能会使得键盘导航变得更困难,因为视觉上不再有...
` 的作用是移除链接被点击时出现的虚线框。 ##### 2.3 针对IE8 IE8及其更早版本可以使用标准的CSS `outline`属性来实现类似的效果。具体实现方式如下: ```css a:focus { outline: none; } ``` `outline: none;...
在网页设计中,当用户通过键盘导航(例如使用Tab键)或使用辅助技术(如屏幕阅读器)与页面交互时,浏览器默认会在可聚焦元素(如`<a>`标签、某些表单元素等)周围显示一个虚线边框,称为“焦点轮廓”或“虚框”。...
针对这一问题,有几种方法可以消除Firefox中点击超链接时出现的虚线边框。首先,用户可以通过在Firefox的配置设置中进行修改,但这不是一个推荐的解决方案,因为它会影响到浏览器全局的行为。具体操作是,打开地址栏...
本篇文章将详细介绍如何去除图片链接上的虚线边框,并确保在FF和IE等浏览器中的正常显示。 #### 关键概念解析 1. **虚线(Outline)**:在HTML元素聚焦时,默认情况下某些浏览器会自动添加一个虚线边框来增强可访问...
如果需要在其他情况下实现垂直居中,可以考虑以下几种方法: 1. 使用`line-height`:当文字内容只有一行时,可以设置`line-height`等于容器的高度,使文字垂直居中。 2. 使用`display: table-cell`和`vertical-...
使用数据库的网页被解读的过程通常涉及以下几个步骤: 1. 用户通过浏览器发起HTTP请求,请求特定的网页URL。 2. 服务器接收到请求后,解析URL,识别出这是一个需要与数据库交互的动态网页。 3. 服务器通过CGI、ASP、...
ie55_scroll 自定义浏览器滚动条的特效CSS Marquee 插入滚动文字效果 scrubber 去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 ...
本文针对CSS浏览器兼容性问题进行了较为详细的介绍,包括去除a链接虚线框、实现背景透明、垂直居中、解决IE6的margin加倍问题、浮动元素间的间距问题、解决IE的宽度和高度问题以及解决DIV浮动文本3像素的bug等。...
scrubber 去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 scrollablearea 使用层制作IE中可控制上下滚动的看板 right_click_menu_builder 右键菜单扩展功能 ...
去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 scrollablearea 使用层制作IE中可控制上下滚动的看板 right_click_menu_builder 右键菜单扩展功能 flashtext 制作仿...
但版主以上可以看见的修改方法 增加登录次数和上次登录时间 去掉鼠标滚轮缩放图片 论坛输入框外面加上美化虚线 分论坛帖子列表页面底部转换页面的数字的美化方法 帖子中增加随意调整字号...
实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与...
为了兼顾视觉效果和无障碍访问,开发者需要寻找更合适的解决方案来去除链接的虚线边框。一种方法是使用CSS来实现,例如: ```css a:focus { outline: none; } ``` 这种方法适用于大部分现代浏览器,但需要注意的...
以下是对Word 2003中几个关键区域及其图标功能的详细解析: ### 视图菜单图标 1. **普通视图**:提供文档的基本文本视图,不显示页眉、页脚或图形。 2. **Web版式视图**:以网页的形式预览文档,适用于创建适合...
相比之下,**窗口**中的功能更为关键,下面详细介绍几个常用的窗口及其功能。 #### 二、常用窗口功能详解 **2.1 外观(Appearance)窗口** - **填充和描边**:这是AI中最核心的部分之一,用于调整对象的颜色和...
去除a链接的虚线框 - **IE下的解决方案**: ```css a { blr: expression(this.onFocus=this.blur()); } ``` 注意这里的`blr`属性是错误的,正确的写法应使用`border`属性,但实际中此方法已不再推荐使用,...