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,如:
,给a标签前加上 等等等方法...以上方法算是比较全的解决方案了,我最喜欢font-size:0; line-height:0;这种啦!强烈推荐!