图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法。

  第一,给图片img标签display:block。

  img{display:block}

  第二,定义容器里的字体大小为0。

  div {

  width:110px;

  border:1px solid #000000;

  font-size:0

  }

  第三,定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top

  img{vertical-align:bottom}

  其他还有把图片下边距设为负值和改写HTML标签的排列。我觉得前三种就完全可以解决了。

  造成图片在IE下与容器下边界有空隙的原因

  在网上搜了一下,发现old9说的

  图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。

  至于这里的HTML属性align=”center”(对于图片浏览器会处理成align=”middle”),就相当于vertical-align:middle; 所以道理也是一样的,只要vertical-align不取baseline,这个空隙就消失了。

  相关评论

  1.ie的显示有几种模式,在html文档的开始部分声明<!DOCTYPE &hell;ip;.>

  假如声明为strict模式,ie以w3c的方式显示文档,而w3c的标准里面<img />默认是一个inline的标签,除非自己显式的声明为 block

  2.那个空隙是ie针对盒模型默认的line-height和font-size. 给img desplay:block;虽然能解决问题,但没从结构上来考虑.可谓治标不治本

HTML解决div里面img的缝隙问题的更多相关文章

  1. 解决div里面img的缝隙问题~

    解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...

  2. <转载>解决div里面img的缝隙问题

    转载自:http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html   练习切图时发现img和父级div之间总是有2px空隙(chrome),上网搜索解决 ...

  3. 解决div里面img的缝隙问题(转)

    图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...

  4. 解决div里插入img下边缝隙问题

    <html>   <head>   <title> new document </title>   <meta name="author ...

  5. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  6. 解决div嵌套时IE8和FF无法自适应高度

    解决div嵌套时IE8和FF无法自适应高度 还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为h ...

  7. css解决display:inline-block;产生的缝隙(间隙)

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是 ...

  8. 解决div和img之间的空隙

    div盒子和img之间有空隙之前也遇到过几次这问题,今天又遇到了特地来总结下. 先上代码和效果图: <!doctype html><html lang="en"& ...

  9. 如何解决div层被flash遮盖的问题

    页面构建中的Flash层会遮挡Div的问题,一般通过设置wmode="transparent" 或wmode="window"就可以解决.不过对于Flash视频 ...

随机推荐

  1. MockObject

    http://www.mockobjects.com/ http://jmock.org/download.html https://jakarta.apache.org/cactus/mock_vs ...

  2. 第25周五迷茫定位&转行理论建议

    今天下午请假办了无房证明和单身证明,准备开始贷款买房的征程,在犹豫纠结中我选择推进这个事情,之前的经验告诉我生活中可以面临改变或不改变境况的选择是要尽可能的选择改变,因为我还年轻.回来后知乎上看了一个 ...

  3. java的常见异常与错误总结

    算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastException 数组负下标异常:NegativeAr ...

  4. GLView基本分析

    GLView是cocos2d-x基于OpenGL ES的调用封装UI库. OpenGL本身是跨平台的计算机图形实现API,在每一个平台的详细实现是不一样.所以每次使用之前先要初始化,去设置平台相关的信 ...

  5. sql server中关于批处理与脚本的简单介绍

    1.批处理 批处理指的是包含一条或多条T-SQL语句的语句组,这组语句从应用程序一次性地发送到SQL Server服务器执行.SQL Server服务器将批处理语句编译成一个可执行单元(即执行计划), ...

  6. Python 3 学习笔记

    教程地址: http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143161198 ...

  7. Linux中ssh的免密码登陆

    原理: Hadoop的各个节点要实时的进行各种通信的,ssh就是能让各个节点免密码的相互访问相互通信. 操作步骤: 这里用的加密方式是非对称的加密方式,具体的操作是: <1>执行命令ssh ...

  8. WPF多线程下载文件,有进度条

    //打开对话框选择文件         private void OpenDialogBox_Click(object sender, RoutedEventArgs e)         {     ...

  9. 5.6.1 Boolean类型

    Boolean类型是与布尔值对应的引用类型.要创建Boolean对象,可以像下面这样调用Boolean构造函数并传入true或false值. var booleanObject=new Boolean ...

  10. 利用console控制台调试php代码

    /** * 控制台输出 * @param $var * @param string $level */ public function console($var,$level = 'debug') { ...