firefox的超链接点击去除扩大的难看虚线的解决方法

所属分类: 网络编程 / CSS/HTML 阅读数: 516
收藏 0 赞 0 分享
在某些特殊的情况下,比如做一个导航菜单的时候,出现这个情况时效果就很糟糕了,因为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.
更多精彩内容其他人还在看

input文本框样式代码实例

input文本框样式代码实例
收藏 0 赞 0 分享

div+css实现自适应宽度按钮

div+css实现自适应宽度按钮
收藏 0 赞 0 分享

h1标签的使用技巧

h1标签的使用技巧
收藏 0 赞 0 分享

base href 使用方法详解

base href 使用方法详解
收藏 0 赞 0 分享

html label标签的使用教程

html label标签的使用教程
收藏 0 赞 0 分享

使用CSS不用程序实现文字自动截断 用省略号代替

使用CSS不用程序实现文字自动截断 用省略号代替
收藏 0 赞 0 分享

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
收藏 0 赞 0 分享

网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
收藏 0 赞 0 分享

CSS图片拼合生成器只需上传zip包即可

CSS图片拼合生成器只需上传zip包即可
收藏 0 赞 0 分享

用iframe margin实现调用其他网页的某一区域的方法

用iframe margin实现调用其他网页的某一区域的方法
收藏 0 赞 0 分享
查看更多