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.

时间: 2024-09-20 08:54:06

firefox的超链接点击去除扩大的难看虚线的解决方法_经验交流的相关文章

Firefox返回时Iframe的显示Bug的解决方法_经验交流

<script type="text/javascript">//<![CDATA[ if(getCookie('firefoxIframe')){ document.write('<p id="addAd"><a href="cookie.html">点击这里删除这个iframe</a></p>'); document.write('<iframe height="

word-wrap在firefox中不起作用的解决方法_经验交流

完整的css代码为 复制代码 代码如下: word-wrap:break-word; overflow:hidden; 这段代码应添加到td标签的样式中.另外,应该在外层的table标签中添加样式 复制代码 代码如下: table-layout:fixed;

firefox css自动换行的实现方法_经验交流

IE直接用:word-break:break-all;  /*允许词内换行*/    word-wrap:break-word; /*内容将在边界内换行*/    /*需要注意的默认是:*/    word-wrap:normal /*允许内容顶开指定的窗口边界*/           而firefox却没有很好的实现办法 ,一个折中方案就是使用滚动条,但网上也提出了一种用js来判断换行的办法,这里摘录下(转自网络,特此说明). JavaScript复制代码 <script type="t

firefox margin-top失效的原因与解决办法_经验交流

为什么要翻译这篇说明?css2本有人已翻译过,但看一下,很粗糙(不是说自己就怎么怎么样啊,翻译者真的是很值得敬佩的!),近来跟css与xhtml接触得越来越多,但接触得越多,迷惑却总不见少. 现在我觉得很多问题根本不能称之为问题,原因就在于我们的草率理解,比如杀鸡用牛刀,不是不可以,是不合理.不恰当,根源错了,表象也就会错了,如果解决问题从表象入手,难免总会摸不着头脑,还是那句话,要脚踏实地,切莫浮躁. 在这个说明中,"collapsing margins"(折叠margin)的意思是

IE6,IE7和firefox对DIV的支持区别_经验交流

1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用"*+html",现在用IE7浏览一下,应该没有问题了. 现在写一个CSS可以这样: #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html

关于超链接的下划线 使用说明_经验交流

关于超链接中的下划线这个及细节的问题,想必大家都有过讨论和思考,大家都知道,把握一个原则即可:"让使用者清楚的区分超链接文本和其他文本形式,并潜意识知道可以点击.":但对于是否可以潜意识知道可以点击,还是有争议的,不同的人,不同的环境会有不同的见解. 不妨分几个场景讨论一下: 1. 导航区域,潜意识我会去点击. 即便有下划线也是个"古老形式"的摆设,所以一般没有下划线:好的设计不仅满足点击,还满足视觉的层级关系. 2. 整页全是链接,下划线成了可有可无的表现. 象新

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

firefox|js|解决|显示|tbody 今天帮别人写一个网页,发现:当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面,很是诧异.看下面这个例子: <html><head>    <script type="text/javascript">    function body_load()    {     

点击U盘显示需要格式化的解决方法

  1.执行操作前,我们需要下载WinHex这款软件.下载安装运行软件,然后在"工具"选项的下拉菜单中选中"打开磁盘". 2.选中要修复的U盘,注意要选中"物理磁盘"中的U盘,然后点"确定". 3.出现了一个"非分区空间"鼠标左键单击选中这个"非分区空间". 4.然后打开"工具"选择"磁盘工具"→→"扫描丢失分区".出现提示点击

asp.net 点击服务器按钮 不触发后台事件解决方法

问题描述 点击button后不触发后台的事件,求解决,求高手 解决方案 解决方案二:增加按钮的clientClick事件,<asp:buttononClientClick="returnfalse;"或者在类代码中,加在按钮的属性中btnId.setAttribute("clientClick","returnfalse");解决方案三:那为什么不用客户端控件呢,只要客户端控件设置成runat="server"功能和服务