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

风景,因走过而美丽。命运,因努力而精彩。南国园内看夭红,溪畔临风血艳浓。如果回到年少时光,那间学堂,我愿依靠在你身旁,陪你欣赏古人的诗章,往后的夕阳。

  链接用图片做背景,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 中。

以上就是CSS好代码教程:text-indent隐藏文字出现虚线框outline。我们之所以战斗,不是为了改变世界,而是为了不让世界改变我们。更多关于CSS好代码教程:text-indent隐藏文字出现虚线框outline请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
详解css3中 text-fill-color属性

CSS3如何利用text-shadow属性如何实现多种效果的文字样式展现方法

text-algin:justify如何实现文本两端对齐方法小结

CSS3 text-shadow如何实现文字阴影效果

CSS3 text shadow字体阴影效果