zoukankan      html  css  js  c++  java
  • img底部空白以及多余的空白文本节点解决方案

    1:img底部有空白的问题

    img的css属性display的默认值是inline,这样会导致img的vertical-align的默认值是 baseline;

    baseline又不是bottom,只是向四线三格中的第三条线对齐,不是向第四条线对齐;所以出现底部出现空白的地方说到底是第三条线到第四条线的距离;

    要想去掉这段距离,只能从vertical-align下手:

      1: 设置vertical-align:top/bottom/middle;

      2: 设置line-height:0px 或 font-size:0px 间接影响vertical-align的值;

      3: 设置img标签为display:block 或 float:left,这样就会影响到img的display默认值;

    2:img渲染的时候会在后面多出现空白文本节点的问题

    先看第一种写法:

    <div style="font-size: 12px;">
        <img src="../img/img.jpg"  alt="hh" style=" 12px;height: 12px;" />
        我是欧健锋
    </div>

    图片和文字间还是有一点距离的;

    第二种写法:

    <div style="font-size: 12px;">
        <img src="../img/img.jpg"  alt="hh" style=" 12px;height: 12px;" />我是欧健锋
    </div>

    图片和文字间距离基本为0;

    总结:出现上述的问题主要看img的末尾有没有html标签,如果没有的话浏览器会自动渲染一个空白文本节点在img的后面;

    解决方法:

    1:像楼主这样把后面的节点挨着img标签

    2:设置img标签为浮动元素,float:left;

    3:设置img的父元素的font-size:0px;

  • 相关阅读:
    IE下JS文件失效问题总结
    什么是RFC?
    CHROME对CSS的解析
    php_network_getaddresses: getaddrinfo failed
    Fedora10下配置Apache和虚拟主机
    Apache的Charset设置
    网页设计中的面包屑路径
    利用JS实现的根据经纬度计算地球上两点之间的距离
    【OpenCV学习】子矩阵操作
    【OpenCV学习】ROI区域
  • 原文地址:https://www.cnblogs.com/oufeng/p/6399827.html
Copyright © 2011-2022 走看看