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

2016-02-19 23:22 16 1 收藏

下面,图老师小编带您去了解一下CSS教程:text-indent隐藏文字出现虚线框outline,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1629751.html

延伸阅读
wps文字如何隐藏文档内容?   1、如下图所示点击左上角我平时文字倒三角,选择工具,选项。 2、在弹出的选项的对话框中选择左侧菜单中的打印选项,在右侧打印文档的附加信息区域找到隐藏文字,单击其下放的下拉按钮,在弹出的下拉菜单中选择不打印隐藏文字命令,然后单击确定即可; WPS文字2013试卷制作打印隐藏文字 &nbs...
WPS文字2013试卷制作打印隐藏文字   ①将完整版试卷写好,包括答案,按下CTRL键,将我们要隐藏的答案部分一点一点选取中。 ②右击,选择字体,勾选隐藏文字确定。 ③这样打印的时候就可以作为试卷。如果要打印为标准答案,单击打印--选项。 Tulaoshi.Com ④将隐藏文字选取为打印隐藏文字即可。 突出显示功能...
  各位想必都知道,onfocus=”this.blur()”这条代码能消除链接时的虚线框,但你有没有想过,如果你的网页上有几个甚至上百个链接,而你又想要去掉上面那些讨厌的虚线框,难道你还一个个去Ctrl+C、Ctrl+V,天哪!这对一个正常人来说绝对是个恶梦。也许你会说,用DW或其它文本编辑器里的“查找/替换”功能就能解决,对!不可否认,这是一个...
标签: Web开发
说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般,但是这个方法挺新颖的。 1.display:none;的缺陷 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。 2. visibility: hidden ;的缺陷 这个大家应该比较熟悉就是隐藏的内容会...
标签: Web开发
有一系列属性可以改变网页文字的大小和形状,概要如下: font-family 文字使用的字体,比如宋体,Times New Roman,Arial等等 这个属性必须详细制定,不能使用偏僻的字体,要使用安全字体(比如arial,verdana和times new roman和宋体),可以同时指定许多字体,只要使用逗号分开即可。这样的用意是,如果用户...

经验教程

483

收藏

41
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部