情形描述

开发工具:VS2010;

浏览器版本:IE6以上,火狐,谷歌;

页面布局设计:Table+Img布局;

项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙。

分析原因

1.td,img之间margin,padding设置不正确?    显然不是,如果设置了margin和padding其他浏览器应该也出现间隙。

2.前台页面顶部没有<!DOCTYPE html >之类的标签文档声明?    通过检查,已经设置了该文档标签。

3.是不是IE6,IE7对TD和IMG的间隙解析有问题?   待验证。

故障排除

1.将纯HTML页面转变ASPX页面,然后代码格式化。(本人忍受不了代码是一坨坨的,看着揪心。其实这也是导致后面IE6,7出现问题的原因)

2.各浏览器预览,IE6,IE7出现问题,利用F12开发工具追踪页面,发现确实是TD和IMG之间存在间隙,并且只有图片下方有间隙。

3.试各种办法看间隙,该看的CSS均没有异常,无奈查资料,查了好久,终于找到了原因。

4.修改前后代码比较:(为了能看出间隙,分别将body背景设置黑色,table为黄色)

代码修改之前:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body,table, table tr td, img{margin: 0;padding: 0;}
body{background-color: black;}
table{background-color: yellow;}
</style>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="0" cellspacing="0">
<tr>
<!-----------------------------华丽的分割线 开始-------------------------->
<td>
<img width="200" alt="" height="200" src="upload/1_big.jpg" />
</td>
<td>
<img width="200" alt="" height="200" src="upload/2_big.jpg" />
</td>
<td>
<img width="200" alt="" height="200" src="upload/3_big.jpg" />
</td>
<td>
<img width="200" alt="" height="200" src="upload/4_big.jpg" />
</td>
<!-----------------------------华丽的分割线 结束-------------------------->
</tr>
</table>
</form>
</body>
</html>

修改之前IE6,7效果:

代码修改之后:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body,table, table tr td, img{margin: 0;padding: 0;}
body{background-color: black;}
table{background-color: yellow;}
</style>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="0" cellspacing="0">
<tr>
<!-----------------------------华丽的分割线 开始-------------------------->
<td><img width="200" alt="" height="200" src="upload/1_big.jpg" /></td>
<td><img width="200" alt="" height="200" src="upload/2_big.jpg" /></td>
<td><img width="200" alt="" height="200" src="upload/3_big.jpg" /></td>
<td><img width="200" alt="" height="200" src="upload/4_big.jpg" /></td>
<!-----------------------------华丽的分割线 结束-------------------------->
</tr>
</table>
</form>
</body>
</html>

修改之后IE6,7效果图预览:

看到上面的两段代码,是不是大部分人都觉得没有变化啊,代码都一样的,其实仔细一看,就因为一个格式化,一个没有格式化。结果就出现了IE6.7版本的间隙问题。对于这种问题,各位作何感想。。。对于这样的问题,我只想说,大家先看着,我先去吐会儿血。。。

总结和感想

TD和IMG之间出现间隙,我所遇到的就三种:

1.本身TD和IMG之间存在margin或者padding之类的值;可以用开发工具检测一下他们之间的Margin,Padding,border之类的值。

2.前台页面顶部没有<!DOCTYPE html >之类的标签文档声明,这一条一般是容易被忽略的地方,也不容易检查到这种问题,所以平常应该多注意一下。想了解关于这个文档说明标签的请自行百度。

3.IE低版本两者存在间隙,其他浏览器版本均正常,如果出现此种情况,可以考虑上面的解决方式,试试将Td和Img标签亲密接触一下,不要那么疏远,也许会有意想不到的效果,有时候距离产生的不一定是美,而是小三。。。如同那个华丽的黄色间隙。。。

4.建议还是用DIV+IMG来布局,这样可以减少许多莫名其妙的问题,在页面的体验上来讲还是强于Table的。

[原创]ie6,7中td和img之间有间隙的更多相关文章

  1. 【Web】[原创]ie6,7中td和img之间有间隙

    情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...

  2. IE6/7中li浮动外边距无法撑开ul的解决方法

    昨天群里有人提出了这样的问题: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 < ...

  3. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  4. Java中InputStream和String之间的转化

    https://blog.csdn.net/lmy86263/article/details/60479350 在Java中InputStream和String之间的转化十分普遍,本文主要是总结一下转 ...

  5. IE6/IE7中li底部4px空隙的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...

  6. 如何让table中td宽度固定

    table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...

  7. JavaScript中this和$(this)之间的区别以及extend的使用

    jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbo ...

  8. IE6/7中setAttribute不支持class/for/rowspan/colspan等属性

    如设置class属性 ? 1 el.setAttribute('class', 'abc'); 在IE6/7中样式“abc”将没有起作用,虽然使用el.getAttribute('class')能取到 ...

  9. C#中String 与Color之间的相互转换

    C#中String 与Color之间的相互转换 ————————————宋兴柱     其实,我们平常如果要在数据库存放Color类型值的话,肯定会在数据库中建立varchar类型.对吧.但是Colo ...

随机推荐

  1. java Enumeration用法

    Enumeration是java.util中的一个接口类,在Enumeration中封装了有关枚举数据集合的方法. 在Enumeration中提供了方法hawMoreElement()来判断集合中是束 ...

  2. HDU-1540          Tunnel Warfare

    Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  3. [4X]荣耀畅玩4X开箱实录

    http://www.jianshu.com/p/8d171c389ee8 文字都在简书里面啦~~

  4. JavaScript高级程序设计23.pdf

    document对象作为HTMLDocument的一个实例,它还有一些标准的Document对象所没有的属性,这些属性提供了网页上的一些信息 //取得文档标题 var title1=document. ...

  5. 转载:Java多线程中join方法的理解

    转载自:http://uule.iteye.com/blog/1101994 thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A ...

  6. 【ImageMagick】Unix Windows 源码安装

    [ Unix 源码安装 | Windows 源码安装 ] 首先检查一下电脑里已经安装的ImageMagick版本,输入:   convert -version 除非你想要把对另外的图像格式的支持或升级 ...

  7. Uniform resource name

        A uniform resource identifier (URI) is a uniform resource locator(定位器,探测器) (URL), uniform resour ...

  8. [置顶] 分析Java死锁:分析jstack日志

    本文中我将展示一段垃圾代码,这段代码会产生死锁,这样围绕这段代码重点展示三种不同的方法来分析线程日志,从而得知什么地方有问题. 下面的讨论将用到两个类 Account 和 DeadlockDemo c ...

  9. 普通Windows控制台窗口运行nmake编译VC

    我的GDAL编译都是在VS2012提供的prompt windows里面运行nmake完成的.但是如果想将编译自动化,放到Jenkins里面怎么办呢?首先没有VS2012的工程,也不想费力去生成一个, ...

  10. Spring各种注解标签作用详解

    @Autowired和@Resource等注解是将Spring容器中的bean注入到属性,而@Component等注解是将bean放入Spring容器中管理. @Autowired spring2.1 ...