繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:text-indent隐藏文字出现虚线框outline
- CSS样式表
- 做网页中需要掌握的八个CSS布局技巧
- CSS属性 - white-space 空白属性使用说明
- 用CSS构建iframe效果代码
- 用div+css解决出现水平滚动条问题
- ul在Firefox和IE下的不同表现的解决方法
- 用css实现隐藏文本框
- css实现行间距效果
- 研究了一下div+css的高度自适应问题
- 做网页字体大小参考 网页中同字号字体的不同单位对比列表
- css 之 background-position-x
- css实现兼容各个浏览器的技巧的代码
- css中的行间距的代码
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
- scrollWidth,clientWidth与offsetWidth的区别
- 大家需要掌握的 html下SPAN和DIV的区别
- 布局用CSS+DIV的优点总结
- 纯CSS生成抗锯齿圆角的代码
- IE6，IE7和firefox对DIV的支持区别
- DIV+CSS布局的网站对网站SEO的影响分析
- 非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]
CSS样式表 中的 CSS教程:text-indent隐藏文字出现虚线框outline
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 321 ::
收藏到网摘: n/a
链接用图片做背景，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 中。
评论 (0) All
