IE6、IE7下text-indent和display:inline-block的问题

        在做项目的时候常常有这样的问题,一个a标签或是input需要用背景图片显示,但是又因为seo的原因,a标签里面要写字而且不能显示出来,所以要用到text-indent:-999em;direction:ltr;overflow:hidden;同时会设置a标签为inline-block,在其他浏览器下面都不会有问题,但是ie6和ie7下面整个图片都会直接消失了,因为ie6和ie7同时使用text-indent和display:inline-block会有问题,解决方法是将a设置为display:block;或是将a浮动,或者给a定位等

下面给出具体例子:

css代码

.head{
width:106px;
padding:20px;
margin:0 auto;
border:1px solid #000;
}

.logo{
background:url(images/logo.jpg) no-repeat;
width:106px;
height:42px;
display:inline-block;
text-indent:-999em;
overflow:hidden;
direction:ltr;
}

html结构

<div class="head"><a class="logo" href="#">logo</a></div>

firefox下截图                               ie6下截图,图片消失不见了

         

修改过的css代码

.logo{
background:url(images/logo.jpg) no-repeat;
width:106px;
height:42px;
display:block;/*float:left;*/
text-indent:-999em;
overflow:hidden;
direction:ltr;
}

firefox下截图                               ie6下截图

         

 

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/931.html

《IE6、IE7下text-indent和display:inline-block的问题》有2个想法

发表评论