ie6、7下 text-indent 问题

标签：

text-indent属性 用于文字缩进，更多是用来隐藏文字。比如，一个logo标题，上面的问题很有艺术感，不得不把文字和背景组合成一张背景图(此处页面元素用a表示)，但处于SEO方面的考虑,需要把a里面的文字隐藏掉，多数用该方法: text-indent:-9999px;,但在ie6、7中背景和文字会全部隐藏掉，分析出现问题的原因是，ie6、7中并没有真正的inline-block属性，而是通过设置display:inline-block触发了IE的layout， 从而使内联元素拥有了inline-block属性的表症，解决方法：

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

ie6、7中都支持！important属性，只是在ie6终会有小bug,后面的属性会覆盖前面的属性（即便前面有！important），但如果分开写就完美了，如下：

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

element{display:inline;}

这样写（不管先后顺序），ie6就和其他浏览器表现一致了！

关于实现ie6、7的display：inline-block;属性方法：

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

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

关于ie6、7中，text-indent会导致inline-block元素出现偏移甚至消失的问题，做了如下解决方式：

1.添加display:block;属性；

2.添加float:left|right;属性；

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

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

ie6、7下 text-indent 问题

标签：

原文地址：http://www.cnblogs.com/lmy-ms/p/4299885.html