繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:text-indent隐藏文字出现虚线框outline
- CSS样式表
- 字符不会撑大表格的常见css样式
- 表格高级使用技巧_把表格进行到底(必看)
- 网页中Span和Div的区别
- 在IE与FF中如何居中的css写法
- javascript横排竖排标准选项卡效果代码
- 解决ie动态修改link样式，import css不刷新的问题
- css不用图片美化按钮
- 网页打开新窗口target=_blank不符合标准
- Javascript的匿名函数讲解
- Firefox2中输入框丢失光标bug的解决方法
- Firefox返回时Iframe的显示Bug的解决方法
- 使网页成黑白色调的滤镜
- CSS学习笔记Padding 属性中参数的定义与使用
- 无限级CSS树形菜单 Ver2.0
- css多行多列的新闻模式
- Internet Explorer 8 beta 中文版与IE7共存的解决方法
- CSS对Web页面载入效率的影响分析总结
- 巧妙地使用CSS选择器
- 去除链接元素的虚线框 兼容IE7、IE6、FF
- DIV border边框显示不完全问题的解决方法
CSS样式表 中的 CSS教程:text-indent隐藏文字出现虚线框outline
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 313 ::
收藏到网摘: 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
