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.
相关推荐
-
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点击外部和返回键消失的解决方法
刚接手PopupWindow的时候,我们都可能觉得很简单,因为它确实很简单,不过运气不好的可能就会踩到一个坑: 点击PopupWindow最外层布局以及点击返回键PopupWindow不会消失 新手在遇到这个问题的时候可能会折腾半天,最后通过强大的网络找到一个解决方案,那就是跟PopupWindow设置一个背景 popupWindow.setBackgroundDrawable(drawable),这个drawable随便一个什么类型的都可以,只要不为空. Demo地址:SmartPopupWi
-
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去除重复并统计数量方法 首先点击按钮触发事件,然后用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
随机推荐
- Javascript读取cookie函数代码
- Oracle+Mybatis的foreach insert批量插入报错的快速解决办法
- js函数的引用, 关于内存的开销
- Go中map数据类型3点小知识
- C语言实现输入一个字符串后打印出该字符串中字符的所有排列
- Windows下Apache + PHP SESSION丢失的解决过程全纪录
- JS 网页安全色调色板 DW风格
- SQL中JOIN和UNION区别、用法及示例介绍
- sqlserver 禁用触发器和启用触发器的语句
- JavaScript 基本概念
- 模仿jQuery each函数的链式调用
- BootStrap实现轮播图效果(收藏)
- android app icon 图标大小尺寸
- java实现投票程序设计
- PHP+MySQL实现无极限分类栏目的方法
- android中Activity详解(生命周期、以各种方式启动Activity、状态保存,完全退出等)
- 使用C++扩展Python的功能详解
- MySQL 触发器定义与用法简单实例
- layui实现tab的添加拒绝重复的方法
- 利用Nginx反向代理解决跨域问题详解