zoukankan      html  css  js  c++  java
  • firefox的超链接点击去除扩大的难看虚线的解决方法

    在Firefox里,鼠标点击一个链接时,它的周围即出现虚线画出的边框。这种例子遍地都是,在WordPress后台写这个文章的时候,随手点一下右边那些widget,就看到了这个问题(图片的右上角)

    在某些特殊的情况下,比如做一个导航菜单的时候,出现这个情况时效果就很糟糕了,因为Firefox会错误地扩大链接的边框:
    在Firefox 的地址栏输入about:config,回车。有一个配置项叫做“browser.display.focus_ring_width”,把它修改成0, 点击链接时就不会出现那个边框。但这样的话,在焦点落在按钮上时也没有了边框指示。而且作为一个开发者,在浏览器里设置这个属性,无异于掩耳盗铃。
    这实际上是Firefox在<a>这个标签处于focus状态时(pseudo selector - a:focus)给它加的outline属性。
    正确的解决办法是在CSS里加一个规则:
    a {
    outline: none;
    }
    或者缩小范围:
    a:focus {
    outline: none;
    }
    后者使得鼠标左键在链接上按下,松开之前的这段时间里,仍会显示虚线的outline.
    在我看到的大部分网站中,都把这条规则写在CSS里。或许Firefox该考虑去掉这个的默认outline.

  • 相关阅读:
    5-1 CSS命名规范
    npm
    Maven的安装与配置
    Emmet
    计算机常识——IP/TCP协议
    判别分析——距离判别
    R语言创建空向量、矩阵
    Rstudio——基本功能及操作
    R语言——source函数
    R语言关于warning问题——关于options函数
  • 原文地址:https://www.cnblogs.com/webu/p/2796745.html
Copyright © 2011-2022 走看看