.下面引用小山的一篇文章啊:当一个链接得到焦点时,默认会有个虚线框。如图:在Firefox里可以用-moz-outline:none;或者outline:none;来将其去掉。所以我们可以这样写:a:focus{outline:none;-moz-outline" />

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

系统 1788 0

  小山给出了一个最简单的方式,<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

 

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论