|
最近在看文本相关的属性，觉得text-indent挺有意思的,这里就详细介绍一些text-indent的用法包括(块级元素,行内元素,替换元素),需要了解的朋友可以参考下
最近在看文本相关的属性，觉得text-indent挺有意思的，就小小的总结了一下（这里不讨论用text-indent来隐藏文字）。
我将会从下面几个方面来进行说明：
1.text-indent应用于块级元素
2.text-indent应用于行内元素
3.text-indent应用于替换元素
4.text-indent应用于inline-block元素
5.继承
6.总结
一、text-indent应用于块级元素
text-indent常用于段落首行2字符的缩进。我们先来看一下demo1（所有demo文章最后会提供下载地址）。
各浏览器都可以正常的显示。如图：
我们也可以通过负的text-indent来制作一些效果，各浏览器表现相同（demo2）：
二、text-indent应用于行内元素
这里分两部分来说，一是text-indent应用于块级元素，块级元素里面有inline元素（通过继承或者指定text-indent），直接上demo3。
可见行内元素，虽然继承了text-indent的值（或者指定），却没有任何作用。
二是inline元素直接指定text-indent的值，或者块级元素不指定text-indent，而里面的inline元素指定。请看demo4。
chrome14、firefox7、opera10.6、safari5、ie8、ie9表现如下：
ie6/7表现如下：
比较一下，chrome14、firefox7、opera10.6、safari5、ie8没有作用于inline元素，但ie6/7却作用于inline元素，而且用于inline元素上，不同的条件表现也不同。
直接用于inline元素上：前面有32px的空白
块级元素不设置text-indent，而inline元素设置（inline前有文字）：text-indent不会作用于inline元素。
块级元素不设置text-indent，而inline元素设置（inline前木有文字）：text-indent会作用于inline元素，且与demo中设置的相同2em(24px，文字大小为12px)。
三、text-indent应用于替换元素
这里以应用到image与input元素为例进行说明，请看demo5。
chrome14、firefox7、opera10.6、safari5中的表现：没有作用于image，但却作用于了input，且中英文没有区别。
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。
最后，还是要说一下，本人水平有限，如有什么不当之处还请多指正。
最后附上所有demo下载地址：text-indent | 
发表于 2012-12-12 11:43:36
