text-indent是css中用于控制段落文本缩进的属性。单位有em,px,pt等常用单位以及百分比。
常用于控制div,td,th,li,p,dd,dt等元素对象中的文本的缩进。很多情况下用text-indent是狠方便的。
当缩进量为px时，IE6，IE7,及Firefox解释的缩进距离是一样的，当设置为em的时候会因为字体字号的定义不同有细小的差异。
如下图所示的新闻列表在网页制作过程中很常见。
html代码如下：
复制内容到剪贴板
代码:
<ul>
<li><span>2008-6-25</span><a href="News.aspx?sysClassID=509bc81"">机构资金进优...</a></li>
<li><span>2008-6-25</span><a href="News.aspx?sysClassID=509bc81"">机构资金进驻优...</a></li>
</ul> 然后在CSS中设置li和span的属性：
复制内容到剪贴板
代码:
li{line-height:25px;height:25px;text-indent:15px;background:url(../images/icon_2.gif) left center no-repeat;}
span{float:right;padding-right:10px;}这时候IE6和IE7都会在文字左边缩进15px，而在Firefox下面这15px像素缩进就不见了
这是因为ie是根据文本排列的方向解释缩进的。而Firefox按照标准根据文本流的方向解释缩进，是将15px的缩进解释到了span元素的前面，而span元素拥有的float属性恰好能够消除父元素的text-indent的值，所以这15px就不见了。
解决这个兼容问题的本人目前知道的方法是将text-indent改为padding-left,这因为父元素padding属性是不会随子元素的float属性而消除。
[
本帖最后由 lijun198296 于 2008-6-30 15:37 编辑 ]
