链接用图片做背景,text-indent:-9999px; 隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。(BTW: 因为平时是用 overflow:hidden; 属性的,所以一直也没有注意到这个问题的存在。)
虚线框,其实就是 CSS 中的 outline 属性,这也说明 IE 和 Firefox 对于 outline 和 border 的解析范围并不一致:IE 认为虚线框就是border的边缘,而 Firefox 则认为虚线框应该是文字范围。
那 W3C 中是如何定义 outline 的呢?
At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out. CSS2 outlines differ from borders in the following ways:
- Outlines do not take up space.
- Outlines may be non-rectangular.
最后按照上次《如何去除点击链接时出现的虚线框 》文中的方法,把虚线框去掉了a:focus { outline:0 } ,毕竟这个问题只存在 Firefox 中。
至于可用性问题的解决,比较赞同下面的方法(摘自 old9的博客 ):
建议:隐藏可以,不过从可用性角度考略,最好对 focus 状态做一些变化,以免用户在使用 tab 键切换焦点时找不着北。我的方法就是把focus 和 hover 设成一样。