IE6下font-size值设置与否对元素height,background产生的影响(一)

IE6下font-size值设置与否对元素height,background产生的影响(一)

        日前所做的一个小项目中，碰到一个IE6的bug，情况如下：

 

      我使用一个<p><span>文字文字</span><span class=”picture”></span><span>文字文字</span></p>来描述一段文字，在这段文字中，还有一些小的图片穿插其中。其中我将小图片通过设置span.picture的background来实现。

      html代码如下：

<p class="flow-number">
   <span>12634</span>                        
   <span class="sign"></span>
   <span class="color_green">4561</span>
</p>

     css代码如下：

.sign {
background: url(http://img02.taobaocdn.com/tps/i2/T18auUXbpfXXXXXXXX-8-24.png) no-repeat;
height: 8px;
width: 8px;
display: inline-block;
}

    在IE7+,chrome,FF下面均能正常显示，然而在IE6下，span.sign的背景图的高度莫名增加了。

    如图所示：

    估摸着原因可能是IE6默认的font-size为12px，因此只要设定font-size的值为合适大小就可以，或者font-size:0也是可行的。

    修改css代码如下：

.icon {
    background:url(http://img04.taobaocdn.com/tps/i4/T1.WOUXfteXXXXXXXX-9-10.png) no-repeat center 0;
    height:5px;
    line-height:5px;
    font-size:0;
    margin-bottom:5px;
}

      这样，背景图片就能正常显示了，如下图所示：