链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待,这种技巧经常用到,作个记录,以备不时之需。
当一个链接得到焦点时,默认会有个虚线框。如图:
在 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 代码应该是:
还有一种不推荐的办法。就是让链接得到焦点的时候失去焦点。
<
a
href
="#"
onfocus
="this.blur();"
>
链接</
a
>
这种办法很管用,但过于暴力,最好不要用了。
分享到:
相关推荐
css_实现虚线 css_实现虚线 css_实现虚线
图像加虚线框的方法,csS及原文件下载研究
html设置分割线虚线,css border设置虚线样式
介绍: 方法二: 在页面中加入下面CSS代码即可
学习之路不可停止,最近在研究CSS,今天爱站技术频道的小编就給你们带来这篇CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的同学可以参考一下。
链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待,这种技巧经常用到,作个记录,以备不时之需
隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。 因为平时是用overflow:hidden; 属性的,所以一直也没有注意到这个问题的存在,但...
本文使用JS、CSS、标签属性等方式去除IE链接上的虚线框,方法很简单,大家可以选择使用
1、CSS边框虚线 – TOP 这里通过边框属性的虚线边框border控制虚线。以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思。 一、四边为虚线边框 复制代码代码如下:border:...
3、实现虚线的CSS重点介绍 border为边框属性,如果要实现对象边框效果,要设置边框宽度、边框颜色、边框样式(实线还是虚线) border:1px dashed #F00 这个就是设置边框样式宽度为1px,虚线,虚线为红色。 4、实例...
CSS3 SVG叶子虚线显示特效是一款css3绘制叶子和svg虚线条结合创意的响应式布局代码。
IE升级过后常常出现这样的问题:浏览网页中的FLASH的时候,鼠标放上去会出现虚线框,并提示“单击以激活并使用此控件”,需要多点击一次才能正常播放,这即影响美观(鼠标划时会有一个框),又不方便。 在IE,Maxthon...
js基于css3制作的圆形虚线时钟特效,一款简单的网页时钟,默认获取本地时间,同时还显示数字时钟、日期和星期。
不知道用这么做好的,还是蛮可以的,只是行不要列,其实还可以用其他方法的。这个相对简单吧。只要设置Table属性就可以了。
HTML5图片放大 图片裁切 动画虚线框示例,测试需要在服务器环境下进行,不能直接双击打开HTML。如演示效果所示,图片是经过放大后,再进行裁切的,本地客户端环境,需要IE9、火狐、chrome等浏览器。
复制代码代码如下: <style> .table5{text-align:center; border:1px solid #cccccc; border-radius :3px; background-color:#FFFFFF; width:650px;} .table5 td{border-bottom:1px dashed #cccccc;...
这里议决边框属性的虚线边框border控制虚线。以下配置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思。 一、四边为虚线边框 border:1px dashed #000; 黑色虚线边框 实例:...
[code]a{ outline:none;/*ff*/ hide-focus:[removed]this.hideFocus=true);/*ie*/ } [/code]