逛奔的蜗牛

我不聪明,但我会很努力

   ::  :: 新随笔 ::  ::  :: 管理 ::
a{
    blr:expression(this.onFocus=this.blur());   /*    IE Opera    */
    outline:none;   /*    FF Opera    */
}
a:focus{
    -moz-outline-style: none;   /*    FF    */
}
关键:a:focus, input[type=button] ,input[type=submit] { outline:none;}

话说,对于去除虚线框,即使是一个前端开发工作者,也可能不知道所有的潜规则。因为很多情况下,它是一个视觉上的辅助,并且盲人们需要它(怎么个需要法,别问我),我们并不需要去掉。但在图片替换文字,或者虚线显示不规则的时候,去掉它对于一个产品来说会是更完美的。

如何去除虚线框
对于如何去除虚线框,有很多人推荐这样写:

a:focus, input[type=button] ,input[type=submit] { outline:none;}
从这段代码来看,让我们小分析一下,有两点可能是需要我们注意的:




去除不全面
IE6/7 并不支持 outline 属性, firefox 下 input 的虚线并没有去除

去除太多
除 IE6/7 外的所有浏览器的按钮(firefox没去掉)和链接都被去掉虚线框



这是看起来矛盾的两个问题。其实不然,因为是两个现同性质的问题。从技术上,这个方法并不全面。从体验上,我想你也知道,我们只是去掉部分不需要的,去掉全部并不友好。所以,上面的写法个人并不推荐。

关于潜规则、关于BUG
Demo: 去虚线框 | remove outline

我能在用 TAB 键的时候不去掉虚线框吗?为什么我的 input 在 firefox 下没有成功去除虚线框?这些问题被提出的时候,困扰着不少人。因为这里面有潜规则。总结一下,看这个表:

去除的方式

生效的浏览器



outline:none

IE8 | Firefox | Webkit |Opera



hidefocus

IE



:focus{outline:none;}

IE8 | Firefox | Webkit | Opera



:active{outline:none;}

同上,但在tab的时候,IE将保留虚线框



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

Firefox 存着bug,input 须要去这个伪状态下的边框

好吧,不得不承认的是,这些小事,都还真是一门学问,我们要好好学习,好好积累。多用点心,把东西做得更好。

From: http://topic.csdn.net/u/20100716/10/1100158f-5d78-410f-8783-d3d6a39ffd71.html

posted on 2010-07-17 00:35 逛奔的蜗牛 阅读(2492) 评论(0)  编辑 收藏 引用 所属分类: 其他编程

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   博问   Chat2DB   管理