【Web】[原创]ie6,7中td和img之间有间隙
情形描述
开发工具：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的。
【Web】[原创]ie6,7中td和img之间有间隙的更多相关文章
- [原创]ie6,7中td和img之间有间隙
情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...
- span 右浮动折行 解决ie6/7中span右浮动折行问题
A floated box is shifted to the left or right until its outer edge touches the containing block edge ...
- Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么（转）
Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...
- IE6/IE7中li底部4px空隙的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...
- 如何让table中td宽度固定
table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...
- （转） Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？
Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么? 建站有很多技术,如 HTML.HTML5.XHT ...
- Asp.net mvc web api 在项目中的实际应用
Asp.net mvc web api 在项目中的实际应用 前言:以下只是记录本人在项目中的应用,而web api在数据传输方面有多种实现方式,具体可根据实际情况而定! 1:数据传输前的加密,以下用到 ...
- IE6/7中setAttribute不支持class/for/rowspan/colspan等属性
如设置class属性 ? 1 el.setAttribute('class', 'abc'); 在IE6/7中样式“abc”将没有起作用,虽然使用el.getAttribute('class')能取到 ...
- C# asp.net IIS 在web.config和IIS中设置Session过期时间
有时候在web.config设置sessionState 或者类文件里设置Session.Timeout,在IIS里访问时每次都是达不到时间就超时,原因是因为在IIS中设置了Session的超时时间, ...
随机推荐
- mysqldump恢复
mysqldump的恢复操作比较简单,因为备份的文件就是导出的SQL语句,一般只需要执行这个文件就可以了,可以通过以下的方法. 方法一 [root@zstedu andyxi3306]# mysql ...
- js高阶函数汇总
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,函数按照原始数组元素顺序依次处理元素. 注意: map() 不会对空数组进行检测. 注意: map() 不会改变原始数组. ...
- swoole 定时器 swoole_time_tick 和 swoole_time_after
<?php class myticker{ public $server = null; CONST host = '127.0.0.1'; CONST port = 9502; public ...
- 【原】GitHub使用教程
GitHub使用教程 1 注册 GitHub 账户 要想使用github第一步当然是注册github账号了(www.github.com). 2 安装客户端 msysgit github是服务端,要想 ...
- Module parse failed: Export 'instance' is not defined (35:19)
Module parse failed: Export 'instance' is not defined (35:19) 使用npm出现的这错误,用yarn就可以了 这种情况rm node_modu ...
- 面向对象（oop）特征
上课时老师不止一次和我们说过,面向对象是Java基础的重中之重!!所以一定要扎实基本功,代码都是呆子活,重要的是思想! 一般来说oop的三大特性是:封装.继承和多态,上次笔者看到有把抽象也归类其中,不 ...
- 错误/异常：org.hibernate.id.IdentifierGenerationException: ids for this class must be manually assigned before calling save() 的解决方法
1.错误/异常视图 错误/异常描述:id的生成错误,在调用save()方法之前,必须先生成id. 2.解决方法 在对应的实体类的主键(id)的get方法上加上:@GeneratedValue( ...
- 博弈dp入门 POJ - 1678 HDU - 4597
本来博弈还没怎么搞懂,又和dp搞上了,哇,这真是冰火两重天,爽哉妙哉. 我自己的理解就是,博弈dp有点像对抗搜索的意思,但并不是对抗搜索,因为它是像博弈一样,大多数以当前的操作者来dp,光想是想不通的 ...
- Hbase底层解析
hfile+compaction 原理 用户数据写入先写WAL,再写缓存,满足一定条件后缓存数据会执行flush操作真正落盘,形成一个数据文件HFile.太多数据文件会导致数据查询IO次数增多,因 ...
- triplet
询问次数<=min(2*n,n+35) 一种类似hash的交互题 部分分n=5,限制10次 发现都问出来可以通过次数和大小确定所有的值和对应位置! n比较大 发现(X1,X2,i)能确定一些情况 ...