text-indent在IE6/IE7中的位置偏移BUG

text-indent一般用来实现文字缩进，不过更多的时候是用来实现文字隐藏。发现在IE6/IE7中，text-indent会导致inline- block元素出现向左(text-indent的值为负时)或向右(text-indent值为正时)的偏移。

inline-block元素设置text-indent在IE6/IE7中不正常，在IE8中正常。造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block， 而是通过设置display:inline-block触发了IE的layout， 从而使内联元素拥有了inline-block属性的表症。

解决方法：

.element{display:inline-block !important; display:block;}

因为ie6/ie7不支持 important 属性，所以在 ie6/ie7 下元素会显示为一个 block 级元素，而在支持 important 的浏览器（firefox, safari）下元素将显示为一个 inline-block 级元素。

以上引用的“ie6/ie7不支持 important 属性”那段纯属胡扯，IE6/7都支持important属性的，只是在IE6中有一点点小bug，就是如上面的写法确实是无效的，后面的属性会覆盖前面的（即使前面的有important属性），但如果分成两段写就可以完美支持了，如下：

.element{display:block !important; display:block;}.element{display:inline;}

这样的写法（不管顺序前后）IE6表现就和其他浏览器一致了！

关于实现ie6/7的inline-block属性的方法如下：

.element{display:inline-block; *display:inline;zoom:1}

这样通过zoom触发IE的layout，就让内联元素拥有的inline-block属性的特性！

关于在IE6/IE7中，text-indent会导致inline- block元素出现向左(text-indent的值为负时)或向右(text-indent值为正时)的偏移甚至消失的问题，下面做一个小结：

这里再考虑一个问题，使用text-indent的原因——比如：做一个按钮时，由于按钮的文字的艺术感太强直接跟背景一起切片，但处于SEO方面的考虑，要在a标签内添加相应的文字，然后使文字不可见。于是最常用的方法text-indent:-9999px;（通常用在div、p之类的块级标签text-indent:2em;）但却在按钮设置上IE6、IE7下出现了问题，下面是解决办法列表：

添加display:block;属性

添加float:left|right;属性

设置*text-indent:0;*line-height:300px;注意此方法要有宽高设置overflow:hidden;

去除text-indent属性，设置font-size:0; line-height:0;

或者修改你的html，如：

  Download PDF

以上方法算是比较全的解决方案了，我最喜欢font-size:0; line-height:0;这种啦！强烈推荐！