问题解决:图片与容器下边界有空隙的解决方法

解决|问题

第一,给图片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下与容器下边界有空隙的原因

图片文字等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 ....>
如果声明为strict模式,ie以w3c的方式显示文档,而w3c的标准里面<img />默认是一个inline的标签,除非自己显式的声明为 block

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

时间: 2024-12-28 15:37:56

问题解决:图片与容器下边界有空隙的解决方法的相关文章

IE下img图片与容器下边界有空隙的解决方法

IE下img图片与容器下边界有空隙的解决方法

Android编程中聊天页面背景图片、标题栏由于键盘引起问题的解决方法_Android

本文实例讲述了Android编程中聊天页面背景图片.标题栏由于键盘引起问题的解决方法.分享给大家供大家参考,具体如下: 在一个群里面有人问到 聊天页面由于键盘弹出来,导致自定义的标题栏不见和背景图片都变形了,然后自己也折腾了一下,在stackOverFlow上面找到了一个解决方法. 解决方法很简单: 1.在AndroidManifest.xml文件里面的Activity配置: 复制代码 代码如下: android:windowSoftInputMode="adjustResize|stateAl

xp系统下主题不能使用的解决方法

  xp系统下主题不能使用的解决方法          可以在桌面右击属性,点开主题的下拉箭头,可以看到以前安装的主题都不见了,桌面也变成了灰白色.也就是XP的经典模式. 从网上下载一批新的主题后进行主题安装,从桌面属性里点开后也看不到最新安装的主题,就出现了一个水墨主题,但点后也是显示不完整的. 为了解决这个问题,从我的电脑上打开C:WINDOWSResourcesThemes 进入主题安装的目录 双击一个主题文件,文件提示电脑主题的服务没有启动,好像找到了问题的所在. 打开控制面板,双击打开

javascript在IE下trim函数无法使用的解决方法

 本文实例分析了javascript在IE下trim函数无法使用的解决方法,对于web前段设计有一定的借鉴价值.具体分析如下: 首先,javascript的trim函数在firefox下面使用没有问题: 1 <script language="javascript">  2  var test1 = "  aa  ";  3  test1 = test1.toString();  4  test1 = test1.trim();  5 </scri

window.location.href IE下跳转失效的解决方法

 这篇文章主要介绍了window.location.href IE下跳转失效的解决方法,需要的朋友可以参考下 代码如下: <a href="javascript:void(0)" >GoNext</a>  $("a").click(function(){  window.location.href = "xxx.html";  })    代码如上,在IE下,特别是在IE6中,点击超链接之后,浏览器并没有发生跳转行为. 

Win8系统下自动开启Bing的解决方法

  Windows8系统面市已经有一段时间了,用户安装体验win8也有一段时间,对于win8的操作,相信很多用户已经或多或少掌握了一些,但是在面对win8系统下的一些小问题还是无法自己去解决,下面我们就来分享一个win8系统下自动打开bing的解决方法,供用户参考. 问题症状: 开机自动启动默认浏览器并且打开cn.bing.com站点.问题浏览器不限于IE,即使安装了火狐.谷歌的都一样;同时,不是所有安装Win8系统的用户都会有. 解决方案: - 同时按住Win + R键,输入"gpedit.m

Win7系统下无法打开光盘的解决方法

  虽然现在大家都习惯于在网上观看一些视频,似乎光盘的使用率大大下降了,但是相比网上的视频资源,光盘视频像素更加高一些,而且网上很多都是盗版的,所以还是有部分人会一如既往的使用光盘.不知道是不是因为长时间不用光盘了,今天小编使用win7电脑打开光盘的时候无法打开了,这是怎么回事呢?小编首先排查了光驱的因素,看看是不是光驱坏了,但是并非光驱的原因,到底是什么原因呢?下面小编和大家分享Win7系统无法打开光盘的解决方法. Win7系统下无法打开光盘的解决方法教程 1.首先点击开始打开运行窗口,在运行

JQuery.validate在ie8下不支持的快速解决方法_jquery

一.在ie8下回有问题的代码 1.JQuery.validate验证框架是通过页面form表单提交验证<input/>标签中输入是否符合自己的规则的 <form id="cardTypeFrm"> <table width="100%" cellspacing="0" cellpadding="0" class="table_pzh"> <tbody> <

javascript在IE下trim函数无法使用的解决方法_javascript技巧

本文实例分析了javascript在IE下trim函数无法使用的解决方法,对于web前段设计有一定的借鉴价值.具体分析如下: 首先,javascript的trim函数在firefox下面使用没有问题: <script language="javascript"> var test1 = " aa "; test1 = test1.toString(); test1 = test1.trim(); </script> 在火狐下这样用没有问题,