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等现代高级浏览器中显示的效果良好，可以达到预期的样子。

<div>
<input type="text" value="sadasdas" style="width:120px;height:26px;border:1px solid #ccc;line-height:26px;text-indent:20px;"/>asdasdasdasd
</div>

效果为：

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


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


              221651637.jpg





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


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


<div>
<span>asdasd</span><input type="text" value="sadasdas" style="width:120px;height:26px;border:1px solid #ccc;line-height:26px;text-indent:20px;"/>asdasdasdasd
</div>


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

现代浏览器：224813314.jpg     ie6:224842652.jpg


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


代码：

<div>
<span>asdasd</span><span style="display:block;">12134</span><input type="text" value="sadasdas" style="width:120px;height:26px;border:1px solid #ccc;line-height:26px;text-indent:20px;"/>asdasdasdasd
</div>


现代浏览器：230016279.jpg  ie6：230054489.jpg


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



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


如果input设置float的情况下：


<div>
<input type="text" value="sadasdas" style="width:120px;height:26px;border:1px solid #ccc;line-height:26px;float:left;text-indent:20px;"/>asdasdasdasd
</div>


现代浏览器：231122523.jpg(表现依旧良好)


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



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


例子 3：

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

 
  
  1. <div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
  2. <span style="background: #FF0; color: red; text-indent: -9999px;">Indent</span>
  3.     正文   
  4. </div>
 
  

 
  
在 Firefox 中，渲染正常：
 
  
截图：Firefox 中渲染正常
 
  
在 IE6 中，错误，我们什么也看不到了：
 
  
截图：IE6 中渲染错误
 
  
错在 span 不但将自身的 text-indent 属性传递给了它的父元素 div，而且还将超出的内容隐藏了，在没有定义 overflow 属性时，元素的默认 overflow 属性应该是 visible。
 
  

 
  
例子 4：
 
  
既浮动，又负值的 text-indent 呢？（事实上我正是在这种情况下遭遇了这个 Bug）：
 
  
 
  
  1. <div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
  2. <span style="float: right; margin-left: 5px; width: 40px; background: #FF0; color: red; text-indent: -9999px;">Indent</span>
  3.     正文   
  4. </div>
 
  
在 Firefox 中，渲染正常：
 
  
截图：Firefox 中渲染正常
 
  
在 IE6 中，仍然是错误：
 
  
截图：IE6 中渲染错误
 
  
依然是 span 将自身的 text-indent 属性传递给了它的父元素，并将超出的内容隐藏了。
 
  
以上的 Bug 在 IE8 的“IE7 mode”中得到了部分修正，当 span 为浮动时基本是正常的，但默认情况下仍然错误。
 
  

 
  

 
  
以上是目前为止会遇到的关于text-indent发生bug的情况的总结。如果以后有情况发生的话，会再更新到这篇文章上来。如果大家有碰到其他的问题的话，欢迎留言！