`
dennisbing
  • 浏览: 160657 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

去掉图片链接周围的虚线框

 
阅读更多

 小山给出了一个最简单的方式,<img> 的样式<img src="/img/icon/logo.png" width="100px" height="24px" style="border: 0 none;"/>.
下面引用小山的一篇文章啊:

当一个链接得到焦点时,默认会有个虚线框。如图:

链接虚线框

在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写:

a:focus {     outline:none;     -moz-outline:none; }

顺便提一下,如果你用过 Safari 和 Chrome 可能会发现,当输入框得到焦点时边框会出现阴影效果。

如果想去掉阴影效果也可以用 outline 属性。

input,textarea {     outline:none; }

言归正传,刚刚说的是 Firefox ,现在说说 IE。首先比较遗憾,还没有找到通过 CSS 去掉 IE 链接虚线框比较好的解决办法。所以只能用一个替代的办法,就是 a 标签的 hidefocus 属性(这个属性是 IE 独有的)。

<a href="#" hidefocus="true">链接</a>

注意:JS 脚本对应的属性名是:hideFocus。对应的 JS 代码应该是:
xxx.hideFocus = ‘true’;

还有一种不推荐的办法。就是让链接得到焦点的时候失去焦点。

<a href="#" onfocus="this.blur();">链接</a>

这种办法很管用,但过于暴力,最好不要用了。

原文出处:   http://ouyo.info/show.php?pid=1109

 

分享到:
评论

相关推荐

    js 特效 html 特效 去掉图片链接周围虚线

    js 特效 html 特效 去掉图片链接周围虚线

    javascript经典特效---去掉图片链接周围虚线.rar

    本主题围绕“JavaScript经典特效——去掉图片链接周围虚线”展开,我们将探讨如何利用JavaScript来解决这个问题。 首先,我们需要了解HTML中的`&lt;a&gt;`标签,它是用来创建超链接的元素。当`&lt;a&gt;`标签包裹着图片`&lt;img&gt;`...

    IE4 IE5中点击一个图片链接(实际是链接获得焦点)或者文字连接的时候,周围就会出现一圈讨厌的虚线框,用这个插件可以去掉

    IE4 IE5中点击一个图片链接(实际是链接获得焦点)或者文字连接的时候,周围就会出现一圈讨厌的虚线框,用这个插件可以去掉

    鼠标指向网页图片时图片周围显示虚线框

    在给定的标题和描述中,提及的问题是“鼠标指向网页图片时图片周围显示虚线框”,这正是通过CSS的`:hover`伪类来改变图片边框样式的一个典型应用。 首先,让我们深入理解这段代码的工作原理。在HTML结构中,有一个`...

    使用CSS去掉超链接的虚线边框的方法

    在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。  这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标...

    javascript常用代码.pdf

    - 当用户点击图片链接时,周围通常会出现虚线边框,这可以通过在`&lt;a&gt;`标签上添加`onFocus`事件来消除,如`()"&gt;&lt;img src="logo.jpg" border=0&gt;&lt;/a&gt;`。 3. **电子邮件表单提交**: - HTML表单可以用于提交数据到...

    javsropt代码

    &lt;input style="ime-mode:disabled"&gt; 关闭输入法 &lt;br/&gt;光标是停在文本框文字..."&gt; &lt;br/&gt;怎样去掉图片链接点击后,图片周围的虚线? &lt;a href="#" onFocus="this.blur()"&gt;&lt;img src="logo.jpg" border=0&gt;&lt;/a&gt;

    40种网页常用小技巧(javascript)

    11. 去除图片链接虚线:在图片链接周围添加 `onFocus="this.blur()"` 可以消除链接被点击后出现的虚线框。 12. 电子邮件表单提交:使用 `&lt;form&gt;` 标签的 `action` 属性设置为 `mailto:` 开头的地址,可以将表单数据...

    55种网页小技巧 ---- 下载无需扣分,具有一定收藏价值

    去掉图片链接点击后,图片周围的虚线.html 取得控件的绝对位置.html 取消选取、防止复制.html 可以在收藏夹中显示出你的图标 .html 各种样式的光标.html 回车键换行.html 在打开的子窗口刷新父窗口的代码里...

    JavaScript.txt

    - **解释**:这段代码定义了一个带有图片的链接,通过设置`border`属性为`0`来去除图片周围的边框,并通过`onFocus`事件处理程序调用`this.blur()`方法来避免点击链接时出现虚线框。 ### 17. 表单提交至邮箱 - **...

    Word 2003图标

    7. **隐藏虚框**:隐藏表格的虚线辅助框。 8. **升序排序**、**降序排序**:对表格数据进行排序。 9. **自动求和**:自动计算表格数据的总和。 10. **底纹颜色**、**边框颜色**:设置表格的底纹和边框颜色。 ### ...

    DIV+css学习笔记

    `list-style-type`用于去除或改变列表项的符号,如`none`可去掉默认的项目符号。 【网页布局】 CSS常用于实现各种网页布局,如固定宽度、响应式布局等。`auto`值在宽度和高度设置中可让浏览器自动计算大小。 总的...

    CASS快捷命令.docx

    16. LT - LINETYPE:管理线型,可以设置线条的虚线、点线等样式。 17. M - MOVE:移动对象,调整图元的位置。 18. MS - MSPACE:在模型空间和图纸空间之间切换,便于布局和打印。 19. P - PAN:平移视图,移动...

Global site tag (gtag.js) - Google Analytics