text-indent的用法包括块级元素等详细总结

2020-04-30 15:01:26易采站长站整理

ie6/7中的表现:作用于image,且在input中,当为中文与英文时有不同的表现,从这点真不得不佩服ie6/7。还有更加有趣的,当你在全英文的输入框中改它的值时,又会有新的表现。

改变英文输入框的值后:

ie8、ie9中,没有作用于image,但却作用于了input,而且与ie6/7一样,英文与中文有上述的小bug。

改变英文的输入框的值后:

四、text-indent应用于inline-block元素

直接看demo6吧,结果说明一切(chrome14、firefox7、opera10.6、safari5、ie8、ie9中的表现)。

text-indent作用于inline元素

ie6/7的表现(作用于inline-block元素,而且前面多了32px):

五、继承

text-indent这个属性是可以继承的,引用权威指南上的一句话“在css2.1之前,text-indent总是继承计算值,而不是声明值。”。请看demo7。

非ie系列浏览器继承的均是计算值。

ie系列继承的却是声明值。

如果将父元素中的text-indent:2em;改成text-indent:28px,就不会有这个问题。

六、总结

看到这么多的不同点,您是不是感觉到很乱?如果你觉得不乱,那好,你是一牛人。不管你乱不乱,反正我是乱了。

所以,我给自己总结了一下:

1.text-indent只用于div,p这样的元素上,像image、input、inline-block、inline元素绝对不用。

2.text-indent的值如果子元素也要用到父元素的值,用px单位,而绝不用em。

最后,还是要说一下,本人水平有限,如有什么不当之处还请多指正。