您现在的位置是:网站首页> 编程资料编程资料
CSS教程:text-indent隐藏文字出现虚线框outline_CSS教程_CSS_网页制作_
2021-09-09
1238人已围观
简介 链接用图片做背景,text-indent:-9999px; 隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。 因为平时是用overflow:hidden; 属性的,所以一直也没有注意到这个问题的存在,但当你需要
链接用图片做背景,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教程_CSS_网页制作_
- 学DIV CSS技术,如何入门?_Div+CSS教程_CSS_网页制作_
- XHTML CSS制作样式风格切换的WEB站点_CSS教程_CSS_网页制作_
- 我们需要对CSS进行缩写的原因_CSS教程_CSS_网页制作_
- 从三方面加速CSS样式作用网页速度_CSS教程_CSS_网页制作_
- 常用CSS缩写语法总结_CSS教程_CSS_网页制作_
- 总结新手学CSS容易出现错误的内容_CSS教程_CSS_网页制作_
- CSS隐藏网页文字的几种常用方法_CSS教程_CSS_网页制作_
- CSS去除表格的默认间距并且制作1px的细线表_CSS教程_CSS_网页制作_
- DIV CSS制作的个性水平导航菜单实例_Div+CSS教程_CSS_网页制作_
