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

ttx9n · 发表于 2008-12-3 16:26:51

在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.

thywok · 发表于 2022-9-4 22:01:53

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

ki9ku6 · 发表于 2023-10-27 00:34:18

老衲笑纳了

bp5jgbcnt · 发表于 2023-12-8 18:58:46

1312315458748777

plvo189 · 发表于 2024-1-20 23:13:54

额头额定法国队是范德萨

x20yd3qx · 发表于 2024-4-8 11:36:22

来看看怎么样

wxrf98xr · 发表于 2024-5-9 13:35:51

你们谁看了弄洒了可能

64000928 · 发表于 2024-8-27 03:28:11

感谢楼主分享

81708585 · 发表于 2024-9-8 00:18:40

笑纳了老板

plvo189 · 发表于 2024-9-15 21:08:07

天天源码论坛

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] firefox的超链接点击去除扩大的难看虚线的解决方法

相关帖子