情形描述

开发工具：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之间有间隙的更多相关文章

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

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

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

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

  3. 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 ...

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

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

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

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

  6. （转） 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 ...

  7. Asp.net mvc web api 在项目中的实际应用

    Asp.net mvc web api 在项目中的实际应用 前言:以下只是记录本人在项目中的应用,而web api在数据传输方面有多种实现方式,具体可根据实际情况而定! 1:数据传输前的加密,以下用到 ...

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

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

  9. C# asp.net IIS 在web.config和IIS中设置Session过期时间

    有时候在web.config设置sessionState 或者类文件里设置Session.Timeout,在IIS里访问时每次都是达不到时间就超时,原因是因为在IIS中设置了Session的超时时间, ...

随机推荐

  1. Websocket @serverendpoint 404

    今天写一个前后端交互的websocket , 本来写着挺顺利的,但测试的时候蒙了,前端websocket发的连接请求竟然连接不上 返回状态Status 报了个404 ,然后看后台onError方法也没 ...

  2. kubernetes 创建超级管理员和密匙

    # 创建一个超级管理员adm_account="k8s-dash-admin"kubectl create serviceaccount ${adm_account} -n kub ...

  3. BZOJ 3926: [Zjoi2015]诸神眷顾的幻想乡(广义后缀自动机 多串)

    因为任何一条路径都可以看做某两个叶子节点之间路径的一部分,然后分别把20个叶节点当作根,把整棵树看作trie树,那么一条路径就能看作是从根到某个点这一条路的后缀,构建SAM就能维护不同子串的个数了. ...

  4. 关于.Net中Process和ProcessStartInfor的使用

    本文主要是介绍在.Net中System.Diagnostics命名空间下Process类和ProcessStartInfo类的使用 用于启动一个外部程序所使用的类是Process,至于ProcessS ...

  5. 【leetcode】1282. Group the People Given the Group Size They Belong To

    题目如下: There are n people whose IDs go from 0 to n - 1 and each person belongs exactly to one group. ...

  6. Python SMTP发送邮件Ⅱ

    使用Python发送HTML格式的邮件 Python发送HTML格式的邮件与https://www.xuanhe.net/weixiu/4271.html发送纯文本消息的邮件不同之处就是将MIMETe ...

  7. delphi请求http接口中文乱码问题

    请求http接口的时候参数值是中文乱码: http接口一般都是由java,php以及C#开发而成的,乱码的原因也是由于编码的问题,一般传递数据的都是utf8,然后传递的时候都会urlEcode 那么d ...

  8. JVM GC之对象生死

    1.简述 在Java内存运行时区域的各个部分中,程序计数器.虚拟机栈.本地方法栈3个区域随着线程而生,随着线程而亡.栈中的栈帧随着方法的进入和退出而有条不紊的进行着入栈和出栈操作. 每个栈帧需要分配多 ...

  9. ansible主机互信

    前文讲了ansible,但是ansible是基于ssh来做的,首先的和管理主机之间做主机互信,简单来说主机互信就是把主机上产生的公钥传到互信主机上就可以了. 在主机上产生公钥文件.使用命令:ssh-k ...

  10. [题解] [TJOI2011] 构造矩阵

    题面 题解 很容易看出来是道网络流的题目, 要是没有这个字典序最小, 直接建图跑一遍就好了, 考虑如何输出字典序最小的方案 我们可以贪心地去选择, 若当前点可以选0就选0, 不能选0就选1, 有一点像 ...