首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

去掉登录框或许链接的虚线框

2012-07-18 
去掉登录框或者链接的虚线框方法一: IE 下使用expression(this.hideFocustrue), firefox下使用outline: n

去掉登录框或者链接的虚线框
方法一: IE 下使用expression(this.hideFocus=true), firefox下使用outline: none; (除了FF下对按钮不生效, 其它均有效)  代码:
           css:
            .hideFocus{hide-focus: expression(this.hideFocus=true);}/* for ie 5+ */       
            .hideFocus{outline: none;}  /* for firefox 1.5 + */
           html:
            <a href="#" value="我是按钮, 人家也不行要虚线嘛" />

  这个方法的缺点是IE下使用expression, 增加了浏览器负担, 而且ff下对按钮也不能生效.

方法二: 使用js onfocus=blur(); 全生效;  代码:
      css: 无
      html:
      <a href="#" onfocus="blur()">我是链接, 我不想要虚线</a>
      <br/><br/>
       <input type="button" value="我是按钮, 人家也不行要虚线嘛" onfocus="blur()" />

这个方法的优点是不需要写任何css代码, 也适应任何情况. 缺点是需要使用js, 而且"链接/按钮"会失去了focus状态, 在一些需要侦测"链接/按钮"focus状态的情况下, 会造成麻烦.

方法三: 结合outline/border/zoom属性实现  代码:
     css:
     .hideFocus2{outline:0;zoom:1;} 
     .hideFocus2::-moz-focus-inner{border-color:transparent!important;}/* 让FF下button也生效 */
     html:
      <h3>方法三: 结合outline/border/zoom属性实现</h3>
      <a href="#" value="我是按钮, 人家也不行要虚线嘛" />

     这个方法暂时没看出有啥明显的缺点, 但暂时不是很清楚zoom:1;为什么就能让ie6去掉了虚线, 是因为促发了hasLayout吗? 这个问题以后搞清楚后, 会回来记录上.

热点排行