HTML解决div里面img的缝隙问题
图片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的缝隙问题的更多相关文章
- 解决div里面img的缝隙问题~
解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...
- <转载>解决div里面img的缝隙问题
转载自:http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html 练习切图时发现img和父级div之间总是有2px空隙(chrome),上网搜索解决 ...
- 解决div里面img的缝隙问题(转)
图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...
- 解决div里插入img下边缝隙问题
<html> <head> <title> new document </title> <meta name="author ...
- 四种方法解决DIV高度自适应问题
本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...
- 解决div嵌套时IE8和FF无法自适应高度
解决div嵌套时IE8和FF无法自适应高度 还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为h ...
- css解决display:inline-block;产生的缝隙(间隙)
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是 ...
- 解决div和img之间的空隙
div盒子和img之间有空隙之前也遇到过几次这问题,今天又遇到了特地来总结下. 先上代码和效果图: <!doctype html><html lang="en"& ...
- 如何解决div层被flash遮盖的问题
页面构建中的Flash层会遮挡Div的问题,一般通过设置wmode="transparent" 或wmode="window"就可以解决.不过对于Flash视频 ...
随机推荐
- 将四个BYTE数值转换成IEEE754标准的浮点数(两种方法:用Addr函数取字节数字的首地址,或者用Absolute关键字)
在工作中,经常使用到IEEE754格式的数据.IEEE754格式的数据占四个字节,好像Motorola格式和Intel格式的还不一样. 由于工作中很少和他打交道(使用的软件内部已经处理),就没太在意. ...
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- C++面试经常涉及的概念1
1.new.delete.malloc.free关系 delete会调用对象的析构函数,和new对应.free只会释放内存,new调用构造函数.malloc与free是C++/C语言的标准库函数,ne ...
- JavaEE Tutorials (15) - 对Java持久化API应用使用二级缓存
15.1二级缓存概述190 15.1.1控制实体是否可以缓存19115.2指定缓存模式设置来提高性能192 15.2.1设置缓存获取和存储模式192 15.2.2通过编程方式控制二级缓存194
- CCNP路由实验(2) -- OSPF
OSPF作为一种内部网关协议(IGP),用于在同一个AS中的路由器之间交换路由信息.OSPF的特性如下:1.可适应大规模网络2.收敛速度快3.无路由环路4.支持VLSM和CIDR5.支持等价路由6.支 ...
- CCNP路由实验(1) -- EIGRP
EIGRP(Enhanced Interior Gateway Routing Protocol,增强型内部网关路由协议)是Cisco公司开发的一个平衡混合型路由协议,它融合了距离向量和链路状态两种路 ...
- POJ 1222 EXTENDED LIGHTS OUT(高斯消元)
[题目链接] http://poj.org/problem?id=1222 [题目大意] 给出一个6*5的矩阵,由0和1构成,要求将其全部变成0,每个格子和周围的四个格子联动,就是说,如果一个格子变了 ...
- [HDU 4741]Save Labman No.004[计算几何][精度]
题意: 求两条空间直线的距离,以及对应那条距离线段的两端点坐标. 思路: 有一个参数方程算最短距离的公式, 代入求即可. 但是这题卡精度... 用另外的公式(先算出a直线上到b最近的点p的坐标, 再算 ...
- 在SSIS包中使用 Checkpoint从失败处重新启动包
使用SSIS做ETL的过程中会遇到各种各样的错误,对于一些大数据量的Job失败以后我们不希望重新运行,因为重新运行的时间开销是非常大的,我们只希望从失败的部分开始运行,这样可以省去很多的时间. SSI ...
- 【Tomcat】使用Eclipse运行Tomcat7源码
1.搭建开发环境 a.下载好tomcat7源码包 b.安装好jdk7,及设置好环境变量 c.安装好ant,及设置好环境变量,用于预编译tocmat源码. d.以上步骤准备好我们就可以开始进入源码的预编 ...