text-indent 隐藏文字时出现的 outline问题
作者：Blank 来源：怿飞's Blog 发布时间：2007-12-02 17:31:00
标签：text-indent,outline,隐藏
今天在修改 淘宝 宝贝详情页面的时候，发现页面在 Firefox 下遇到这样一个问题：
链接用图片做背景，text-indent:-9999px; 隐藏文字，此效果在 IE 中是正常的，但在 Firefox 里，鼠标点击该链接时，虚线框却会包住被缩进的文字，结果显示为虚线框 N 长。（BTW: 因为平时是用overflow:hidden; 属性的，所以一直也没有注意到这个问题的存在，但当你需要使用 JS 来实现某种交互时，强烈建议不要使用 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:
1. Outlines do not take up space.
2. Outlines may be non-rectangular.
最后按照上次 《如何去除点击链接时出现的虚线框 》 文中的方法，把虚线框去掉了a:focus { outline:0 } ，毕竟这个问题只存在 Firefox 中。
至于可用性问题的解决，比较赞同下面的方法（摘自 old9 blog ）:
在css-d上也看到了相关讨论，建议是隐藏可以，不过从可用性角度考略，最好对focus状态做一些变化，以免用户在使用tab键切换焦点时找不着北。我的方法就是把focus和hover设成一样，嗯，也省事了。
0
投稿猜你喜欢
- 进行已经矢量化后的字符串数据，可以使用pandas的Series数据对象的map方法。这样，对于未经矢量化的数据也可以先进行数据的矢量化转换
最近遇到这个函数，但查的中文博客里的解释貌似不是很到位，这里翻译一下stackoverflow上的回答并加上自己的理解。在pytorch中，- 如下所示：#coding=utf-8#读取图片 返回图片某像素点的b，g，r值import cv2import numpy as npimg
- 方法一import randomimport numpy as npfrom PIL import Image, ImageOps, Ima
- 1.先指定通用模板url = 'https://www.qiushibaike.com/text/page/％d/'#通用的
- IE的for...in循环存在严重的缺陷，除了性能低下外，有许多属性不可遍历，著名有这三兄弟：constructor ,toString ,
- YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习：Yahoo!网站性能最佳体验的34条黄金守则—内容 1、布局的思想：使用
- 最近在学习python网络编程这一块，在写简单的socket通信代码时，遇到了struct这个模块的使用，当时不太清楚这到底有和作用，后来查
- 1.遍历列表需要对列表中的每个元素都执行相同的操作时，可使用for 循环：magicians = ['alice','
- 两列布局的定宽自适应已经详解了，三列浮动中有两列定宽一列自适应的也详解了，那么该说说三列浮动中两列自适应一列定宽的布局了。中间定宽，左右两侧
- 1.什么是Json?JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，它是JavaScript的
- 本文实例讲述了PHP变量作用域（全局变量&局部变量）&global&static关键字用法。分享给大家供大家参考，具
- 本文实例讲述了python获取目录下所有文件的方法。分享给大家供大家参考。具体分析如下：os.walk()函数声明：walk(top,top
- 需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。 css中的cursorhttps
- 下面把角色分为两种，普通用户和管理员用户，至少对于普通用户来说，直接修改DB是不可取的，要有用户注册的功能，下面就开始进行用户注册的开发。用
- 前言超时，指一个协程A开启另一个协程B，A会阻塞等待B一段指定的时间，例如：5秒，A通知B结束（也有可能不通知，让B继续运行）。也就是说，A
- Python是一个很酷的语言，因为你可以在很短的时间内利用很少的代码做很多事情。不仅如此，它还能轻松地支持多任务，比如多进程等。Python
- 1 :普通SQL语句可以用exec执行Select * from tableName exec('select * from tab
- 这两个均是 python 的内建函数，通过读取控制台的输入与用户实现交互。但他们的功能不尽相同。举两个小例子。>>> ra
- 同由其他技术驱动的应用一样，在相同的Web服务器上运行Django应用也是可行的。 最简单直接的办法就是利用Apaches配置文件httpd
