设为首页收藏本站

就爱编程论坛

 找回密码
 注册

人人连接登陆

无需注册,直接登录

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 541|回复: 2
打印 上一主题 下一主题

去除按钮、链接中的虚线框 [复制链接]

Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    我玩的应用:

    跳转到指定楼层
    楼主
    发表于 2011-5-24 18:31:20 |只看该作者 |倒序浏览
    话说,对于去除虚线框,即使是一个前端开发工作者,也可能不知道所有的潜规则。因为很多情况下,它是一个视觉上的辅助,并且盲人们需要它(怎么个需要法,别问我),我们并不需要去掉。但在图片替换文字,或者虚线显示不规则的时候,去掉它对于一个产品来说会是更完美的。
    如何去除虚线框对于如何去除虚线框,有很多人推荐这样写:
    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:noneIE8 | Firefox | Webkit |Opera
    hidefocusIE
    :focus{outline:none;}IE8 | Firefox | Webkit | Opera
    :active{outline:none;}同上,但在tab的时候,IE将保留虚线框
    ::-moz-focus-inner{outline:none;}Firefox 存着bug,input 须要去这个伪状态下的边框好吧,不得不承认的是,这些小事,都还真是一门学问,我们要好好学习,好好积累。多用点心,把东西做得更好。

    分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    分享分享0 收藏收藏0 支持支持0 反对反对0 分享到人人 转发到微博
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    Rank: 3Rank: 3

    升级 
     
    46.33%

    该用户从未签到

    沙发
    发表于 2011-10-12 01:47:09 |只看该作者

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    晴云孤魂's Blog|就爱编程搜帖|手机版|Archiver|就爱编程论坛     

    GMT+8, 2025-7-1 20:18 , Processed in 0.118599 second(s), 29 queries .

    Powered by Discuz! X2

    © 2001-2011 Comsenz Inc.

    回顶部