繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:text-indent隐藏文字出现虚线框outline
- CSS样式表
- CSS优先级规则的细节
- CSS失效，原来是和网页第一段代码有关
- 你真的了解CSS吗？你是属于哪个层次？
- 让样式表CSS代码更加专业规范
- 建议网页设计师用CSS制作网站导航菜单
- 简单学习css组合与CSS嵌套的写法
- CSS学习之css代码的简写的十条规则
- 条件CSS的介绍
- CSS教程:网页中多个样式表顺序问题
- CSS教程：网页版面设计无效的10个原因
- 页面重构工程师应该具有的技能和素质
- 选择正确DOCTYPE解决CSS在网页失效问题
- Opera中国的WEB标准课程
- 简单介绍Web Developer插件制作网页
- CSS布局带来的巨大影响:CSS display属性值
- 用div css模拟表格对角线
- IE Firefox在css中的差别 (部分)
- 不用js可以实现信息提示效果
- CSS解决未知高度的垂直水平居中自适应问题
- CSS cursor 属性 -- 鼠标指针样式效果
CSS样式表 中的 CSS教程:text-indent隐藏文字出现虚线框outline
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 252 ::
收藏到网摘: 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
