快速业务通道

CSS教程:text-indent隐藏文字出现虚线框outline

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-05

  链接用图片做背景,text-indent:-9999px; 隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。

  因为平时是用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 中。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号