css文字不进框里面,CSS教程:text-indent隐藏文字出现虚线框outline

r囧r小猫 2022-09-02 14:55 160阅读 0赞

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

互联网   发布时间：2008-10-17 19:26:54   作者：佚名   ![text-message.png][] 我要评论

链接用图片做背景，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实现outline切换的动画效果,作者展示了一个应用于注册框中的方框自动切换位置的例子,需要的朋友可以参考下2015-06-24

这篇文章主要介绍了利用CSS3实现圆角的outline效果的教程,一般用于实现相框效果,需要的朋友可以参考下2015-06-05

可能很多人不大会注意,当点击一个链接时会出现一个虚线框,其实也没什么影响,可以忽略,但有时候有人会提出想把这个虚线框隐藏掉,该用什么方法做?2011-10-18

![19d9c9b95c43e7ef795f52320ac6e94e.png][]

轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，这篇文章主要介绍了CSS轮廓outline的具体使用的相关资料，小编觉得挺不错的，现在分享给大家，2018-04-08

最新评论

[text-message.png]: https://www.jb51.net/skin/2018/images/text-message.png
[19d9c9b95c43e7ef795f52320ac6e94e.png]: /images/20220829/34d8576e29504cf081ef12f86f232876.png

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS：文字外框圆角彩色渐变效果

先看效果图： ![900ba64aa028405299764d54188b5386.bmp][] 有时需要给文字加一个边框，并且希望边框能够呈现出颜色渐变效果，这里就给大家

水深无声/ 2024年03月23日 21:21/ 0 赞/ 90 阅读

相关 CSS如何实现文字隐藏超出文字隐藏鼠标移入显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdu

快来打我*/ 2023年06月30日 02:29/ 0 赞/ 11 阅读

相关 css单行文字和多行文字溢出隐藏

单行文字溢出隐藏步骤 1. 强制文字一行显示 white-space: nowrap; 1. 将多余的文字隐藏 overflow: hidden

电玩女神/ 2023年02月21日 06:47/ 0 赞/ 18 阅读

相关 CSS 文字装饰

CSS 文字装饰 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

深藏阁楼爱情的钟/ 2022年11月13日 05:21/ 0 赞/ 217 阅读

相关 css文字不进框里面,CSS教程:text-indent隐藏文字出现虚线框outline

CSS教程:text-indent隐藏文字出现虚线框outline 互联网发布时间：2008-10-17 19:26:54 作者：佚名 ![text-messa

r囧r小猫/ 2022年09月02日 14:55/ 0 赞/ 161 阅读

相关 CSS-文字效果

1.1、自定义字体: <!doctype html> <html lang="en"> <head> <meta charset="

逃离我推掉我的手/ 2022年07月15日 10:30/ 0 赞/ 418 阅读

相关 CSS文字排版

时间：2017年4月27日13:35:27 [《我的博客地图》][Link 1] 对于前端开发人员来说，虽然大部分时间用来处理页面布局和业务逻辑问题，但对于

r囧r小猫/ 2022年06月17日 13:37/ 0 赞/ 334 阅读

相关 css radio单选框和文字对齐

老规矩还是先看效果： ![70][] 其实很简单上代码： radio样式设置为： vertical-align:middle; margin-top:

「爱情、让人受尽委屈。」/ 2022年05月16日 11:18/ 0 赞/ 429 阅读

相关 css文字超出隐藏，显示点儿

span{ overflow:hidden; white-space:nowrap; text-overflow: ellipsis;

谁借莪１个温暖的怀抱￠/ 2022年01月07日 06:47/ 0 赞/ 343 阅读

相关 VUE项目之el-input里面有文字出现浮框，没有不出现浮框

一、功能 el-input里面有文字出现浮框，没有不出现浮框。刚开始用的 ![在这里插入图片描述][20191016153129626.png]

谁借莪１个温暖的怀抱￠/ 2021年08月04日 22:40/ 0 赞/ 1360 阅读