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

第一篇csdn的博客，之前的博客都是在博客园里写的，链接地址：http://www.cnblogs.com/hutaoer/   ，但是之前的写得不够好，也很粗糙，现在从csdn开始，认真的总结，分享。

日前所做的一个小项目中，碰到一个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的话，默认的font-size为12px，会将背景图片拉高（我的背景图高度为8px）;因此只要设定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;
}

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

今天有朋友在微博上面说通过设置<span>标签overflow:hidden，可以解决这个问题；我测试了下，虽然不会撑高元素的高度，但是错位较严重，所有还是设置font-size比较好。