ie6、7下 text-indent 问题

时间:2024-11-18 16:35:26

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;