标签：
情形描述
开发工具：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的。
标签：
原文地址：http://www.cnblogs.com/ShadowFiend/p/4536644.html
