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

在某些特殊的情况下，比如做一个导航菜单的时候，出现这个情况时效果就很糟糕了，因为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.

赞 (0)

相关推荐

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

    在某些特殊的情况下,比如做一个导航菜单的时候,出现这个情况时效果就很糟糕了,因为Firefox会错误地扩大链接的边框: 在Firefox的地址栏输入about:config,回车.有一个配置项叫做"browser.display.focus_ring_width",把它修改成0,点击链接时就不会出现那个边框.但这样的话,在焦点落在按钮上时也没有了边框指示.而且作为一个开发者,在浏览器里设置这个属性,无异于掩耳盗铃. 这实际上是Firefox在<a>这个标签处于focus状态

  • 关于android连续点击出现多个Activity界面的解决方法

    前言 开始始学习android,对android的启动模式没有什么了解,就使用了时间判断是否重复点击了两次按钮,启动另外的activity界面,这样的控制方法,有时候会失效,比如,两秒钟还未启动另外的activity,那么又可以重复点击.所以,就调整为android的启动模式来控制重复出现多个acitvity. 一.通过时间控制点击次数: 这种方式对应控制网络请求不错. public class NoDoubleClickUtil { private static long lastClickT

  • 才发现的超链接js导致网页中GIF动画停止的解决方法

    其实这个也是曾经让俺头疼的一个问题,当时怎么都找不到原因,后来才知道这是IE6浏览器的一个bug,不过后来也没有在注意过这个问题.         今日在蓝色经典发现有网友遇到了同样的问题,而且下面的回复者似乎也都不太清楚是什么造成,感觉还是有很多朋友会遇到这种问题的.于是在此对此bug出现的原因解释下下希望对各位有用! 造成GIF停止的代码语句一般都是如下形式: 复制代码 代码如下: <a href="javascript:函数调用或js语句">超链接</a>

  • firefox TBODY 用js显示和隐藏时出现错位的解决方法

    看下面这个例子: function body_load() { var obj = document.getElementById("tr1"); obj.style.display = "block"; } 第一行 第二行 第三行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 它在firefox中显示时,"第一行"被显示在最后一行. 于是在处理好需要显示的行后,另写了一个函数,先记录需要显示的行,然后将所有行的style.disp

  • android PopupWindow点击外部和返回键消失的解决方法

    android PopupWindow点击外部和返回键消失的解决方法

    刚接手PopupWindow的时候,我们都可能觉得很简单,因为它确实很简单,不过运气不好的可能就会踩到一个坑: 点击PopupWindow最外层布局以及点击返回键PopupWindow不会消失 新手在遇到这个问题的时候可能会折腾半天,最后通过强大的网络找到一个解决方案,那就是跟PopupWindow设置一个背景 popupWindow.setBackgroundDrawable(drawable),这个drawable随便一个什么类型的都可以,只要不为空. Demo地址:SmartPopupWi

  • Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

    Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

    前言 公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的. 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是'卡'.点不动.点了没反应. 再大致介绍下项目环境: chrome 44(打包到用户客户端内) Vue 2.6.10 左侧列表布局 列表的每个绿色方框是一个vue组件,名叫ListItem,列表的组件叫List 代码类似这样 // List.vue <template> <div class="

  • Firefox和IE兼容性问题及解决方法总结

    在开发多语言java 网站的过程中,发现不少FF中可以正常运行的代码,可是在IE中不行,反之亦然.IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下: 1.兼容firefox的 outerHTML,FF中没有outerHtml的方法 复制代码 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { var r=t

  • JS去除重复并统计数量的实现方法

    JS去除重复并统计数量的实现方法

    js去除重复并统计数量方法 首先点击按钮触发事件,然后用class选择器,迭代要获取的文本(这里最好用text()方法)加入到Array()集合里.然后创建一个map{},遍历Array()集合,取一个值作为map的key,然后判断是否有值,如果没有就输入值1,如果有就累加1.最后就可以统计出重复的有多少个. for(var key in map){}为迭代方法. 这里附上文本格式,方便大家复制. jQuery("#count").on("click",functi

  • IE8的JavaScript点击事件(onclick)不兼容的解决方法

    博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: 复制代码 代码如下: var a = document.createElement("a");a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent("

  • 去除element-ui中Dialog对话框遮罩层方法详解

    目录 前言 modal 属性 示例代码: 前言 本文主要介绍了如何去除 element-ui 中 Dialog 对话框遮罩层的方法,并给出了示例代码以及页面效果作为参考. modal 属性 在使用element-ui的Dialog时,默认会有遮罩层,想要去除遮罩层,官方文档给出了 modal 属性: modal 是一个布尔值,表示是否需要遮罩层: 然而,将 modal 赋值为 false 时并不生效: 这里官方文档也给出了提示: 当 modal 的值为 false 时,请一定要确保 append

随机推荐