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

日化批发111

日化批发111

2016-02-19 23:22

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

(本文来源于图老师网站,更多请访问http://m.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.

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

  把虚线框去掉了a:focus { outline:0 } ,毕竟这个问题只存在 Firefox 中。

展开更多 50%)
分享

猜你喜欢

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

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

CSS文本:text-indent

Web开发
CSS文本:text-indent

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS教程:overflow与text-indent:-9999px

Web开发
CSS教程:overflow与text-indent:-9999px

CSS控制段落缩进:text-indent:2em

Web开发
CSS控制段落缩进:text-indent:2em

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

wps怎么隐藏文字 wps隐藏文字教程

软件教程
wps怎么隐藏文字  wps隐藏文字教程

网页中用CSS样式表隐藏文字

Web开发
网页中用CSS样式表隐藏文字

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

excel图表标题添加和引用单元格的方法

excel图表标题添加和引用单元格的方法

CSS网页布局开发小技巧24则

CSS网页布局开发小技巧24则
下拉加载更多内容 ↓