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
投稿
猜你喜欢
- 偶写的几个ASP字符串处理函数,用于文章分页的小玩意函数名:StrLen作 用:取得字符串长度(汉字为2)参 
- 完美的渐变透明效果。支持IE,Firefox渐变,自己写的JS框架中用的东西,发出来了。修正完全隐藏时,偶尔不display = "
- 1.安装时选择的自动安装,忘了用户名和密码导致现在试了几个Oracle默认用户名密码後(表格中附带默认用户名及密码),都提示无效的用户名、密
- bbssend.asp'寻呼台页面,向在线网友发送寻呼信息<%@ Language=VBScript %&
- 一、oracle oracle服务器有Oracle instace 和Oracle database instance有memory str
- 一个表单焦点效果javascript函数,可以用在美化表单界面,挺好看的。function validForms(){  
- 在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢?我们可以对加载的 JS 对象使用 o
- 随着jQuery、Mootools、prototype等知名的JavaScript框架的应用变的越来越强大,浏览器对最新版本CSS属性的支持
- 本文主要介绍了一个获取SQL Server数据字典的经典SQL语句,大家可以根据各自的实际情况对这段语句进行相应的修改。SELECT sys
- 去年曾总结了《IE对CSS样式表的限制和解决方案》中限制的第4条写道“一个CSS文件的不能超过288kb?”,这是一个疑问句,当时没有重现出
- 按照本文操作和体会,会对sql优化有个基本最简单的了解,其他深入还需要更多资料和实践的学习: 1. 建表: 代码如下:creat
- 相关文章推荐:各种北京2008奥运会倒计时Flash2008北京奥运会倒计时js代码 全套北京2008奥运会倒计时屏保<!DOCTYP
- 这最近在PJ的function库里看到的这个函数,感觉思路差了点,不过相对比较完美,只是闭合标签时的顺序问题,呵呵 修改一下数组arrTag
- 译者:AlphaImageLoader是一个让IE6正常显示PNG32时要用到的一个滤镜,但它在使用中也会产生一系列的问题,本文对使用Alp
- 来自Six Revisions的一篇文章,作者对一些主流的浏览器进行了测试比较,测试主要针对以下几个方面进行:1.JavaScript执行速
- SQL Server导出表到EXCEL文件的存储过程:*--数据导出EXCEL导出表中的数据到Excel,包含字段名,文件为真正的Excel
- 加强ASP网站后台安全一些主要措施:----------------------------------------------------
- 因为神奇的中文有时也是会遇到国外同学都不知道原因导致一些神奇滴问题,所以要用更神奇的英文来解决问题。Mac OS的一些:华文细黑:STHei
- (5)SELECT (5-2) DISTINCT(5-3)TOP(<top_specification>)(5-1) <s
- 在我的上篇文章发出之后,我听到对“WEb2.0视觉风格”这个称谓的不认同声音。其实这并不出乎我的意料,因为,我在认真的开始思考“WEb2.0