CSS教程:text-indent隐藏文字出现虚线框outline
日期：2014-04-12 浏览次数：21036 次
网页制造aiyiweb文章简介：链接用图片做背景，text-indent:-9999px; 隐藏文字，此效果在 IE 中是正常的，但在 Firefox 里，鼠标点击该链接时，虚线框却会包住被缩进的文字，结果显示为虚线框 N 长。
链接用图片做背景，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 中。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
