zoukankan      html  css  js  c++  java
  • IE6下fontsize值设置与否对元素height,background产生的影响(一)

    IE6下font-size值设置与否对元素height,background产生的影响(一)
            日前所做的一个小项目中,碰到一个IE6bug,情况如下:

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

          html代码如下:

    <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;
    }

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

     

  • 相关阅读:
    2016/3/10 Java 错题
    2016/3/9 Java 错题集
    Java Socket 编程实验总结
    CSU 1290
    CSU 1307
    CSU 1060
    Problem B SPOJ DCEPC11I
    activemq 学习系列(二) 常用配置
    activemq 学习系列(一) 详细入门使用
    MySql 用户创建与授权
  • 原文地址:https://www.cnblogs.com/hutaoer/p/2588636.html
Copyright © 2011-2022 走看看