100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html text-indent css之text-indent

html text-indent css之text-indent

时间:2022-07-12 05:36:24

相关推荐

html text-indent css之text-indent

text-indent(一个在ie6下有着奇怪表现的属性)

text-indent作为大家都很熟悉的一个css属性,应该都不太会对这个属性去做过多的研究。我本来也是觉得这属性也就这样了,直到今天遇到的一个以前未注意过的bug...

先看下w3school对text-indent的介绍:

定义

text-indent 属性规定文本块中首行文本的缩进。

注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。

注意:在 CSS 2.1 之前,text-indent 总是继承计算值,而不是声明值。

说明

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值,这会产生一种“悬挂缩进”的效果。默认值:not specified

继承性:yes

版本:CSS1

JavaScript 语法:object.style.textIndent="50px"

可能的值值描述

length定义固定的缩进。默认值:0。

%定义基于父元素宽度的百分比的缩进。

inherit规定应该从父元素继承 text-indent 属性的值。

上方介绍中的重点我已经用红色字体标出了——块级元素。也就是这个属性只对块级元素生效,(当然因为可替代元素中的input类型和display-block相似,所以内容块也为块级元素,故同样可以设置text-indent)。今天遇到的bug也是出自于这里。

在IE8+(包括IE8),FF,chrome等现代高级浏览器中显示的效果良好,可以达到预期的样子。

asdasdasdasd

效果为:

可以很明显的看出,input内的文字“前进”了20px。

但是同样的代码放在IE6下却是这个情况:

大家可以看到input本身相对于父元素而言也“前进”了20px。

但是后来经过实验几次后发现,并不是说只要是inline元素就肯定会因为text-indent而一起“前进”,其实还要取决于它在父元素中的位置。

asdasdasdasdasdasd

如果在input前再加一个inline元素的话,此时就会发现在现代浏览器与IE6中的表现基本相同:(如果加一个inline-block元素的话表现也是一样的)

现代浏览器: ie6:

此时如果在input前面再加一个block元素的话:

代码:

asdasd12134asdasdasdasd

现代浏览器: ie6:

效果还是会回到bug的状态....真是头疼啊,初步结论是:如果inline元素前面没有元素或者有block元素的话,在IE6下会出现bug。

再说下其他情况下会引发的bug:

如果input设置float的情况下:

asdasdasdasd

现代浏览器:(表现依旧良好)

ie6:但是在ie6下,float后的input将自身的text-indent传递给了父元素,导致input后的文字也“前进”了20px。

还有两种情况就引用下网上别人的例子了:

例子 3:

负值的 text-indent 会是怎样呢?

Indent

正文

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。