Question

我尝试添加cellspacing =“0”cellpadding =“0”。不解决电子邮件客户端中的问题。

以下是gmail中间距的图片：

http://i44.tinypic.com/dmywpe.png

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Openx Webinar</title>
</head>
<body>
    <div style="margin:0;padding:0;font-family:Arial,Helvetica,sans-serif">
    <table align="center" width="600" cellspacing="0" cellpadding="0" style="font-family:Arial,Helvetica,sans-serif" >
        <!-- Header -->
        <thead>
            <tr>
                <td id="header" width="600" valign="top" align="left"><img src="http://openx.dev.limusdesign.com/emails/webinar/images/header.png" alt="OpenX Webinar Series"/></td>
            </tr>
            <tr>
                <td id="banner" width="600" valign="top" align="left"><img src="http://openx.dev.limusdesign.com/emails/webinar/images/banner.png" alt="Banner Image"></td>
            </tr>
            <tr>
                <td width="600" height="20" valign="top" align="left"></td> 
            </tr>   
        </thead>
         </table>
     </div>
    </body>

<html>

关于如何解决此问题的任何建议？注意：这适用于HTML电子邮件。

更新的标题代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Openx Webinar</title>
    <style type="text/css">
    div, p, a, li, td { -webkit-text-size-adjust:none; }
    </style> 
</head>
<body>
    <div style="margin:0;padding:0;font-family:Arial,Helvetica,sans-serif">
    <table align="center" width="600" cellspacing="0" cellpadding="0" style="font-family:Arial,Helvetica,sans-serif" >
        <!-- Header -->
        <thead>
            <tr>
                <td id="header" width="600" valign="top" align="left">
                    <img src="http://openx.dev.limusdesign.com/emails/webinar/images/header.png" alt="OpenX Webinar Series" height="65" style="display:block">
                </td>
            </tr>
            <tr>
                <td id="banner" width="600" valign="top" align="left">
                    <img src="http://openx.dev.limusdesign.com/emails/webinar/images/banner.png" alt="Banner Image" height="180" style="display:block">
                </td>
            </tr>
            <tr>
                <td width="600" height="20" valign="top" align="left"></td> 
            </tr>   
        </thead>
    </table>
    </div>
</body>
</html>

Answer 1

通过向图片添加style="display:block"来解决此问题。

Answer 2

将您的代码更改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Openx Webinar</title>
</head>
<body>
  <div style="padding:0;font-family:Arial,Helvetica,sans-serif">
    <table align="center" width="600" cellspacing="0" cellpadding="0" border="0" style="font-family:Arial,Helvetica,sans-serif" >
      <tr>
        <td id="header" width="600" valign="top" align="left" style="padding:0px;outline:none;border:none;">
        <img src="http://openx.dev.limusdesign.com/emails/webinar/images/header.png" alt="OpenX Webinar Series" style="padding:0px;outline:none;border:none;"/>
        </td>
      </tr>
      <tr>
        <td id="banner" width="600" valign="top" align="left" style="padding:0px;outline:none;border:none;">
        <img src="http://openx.dev.limusdesign.com/emails/webinar/images/banner.png" alt="Banner Image" style="padding:0px;outline:none;border:none;">
        </td>
      </tr>
      <tr>
        <td width="600" height="20" valign="top" align="left"></td> 
      </tr>   
    </table>
  </div>
</body>
</html>

Answer 3

您可以更改包含第一张图片的<td></td>的显示选项：

thead tr:first-child td
{
  display: block;
  height:65px;
}

或img本身

thead tr:first-child td img
{
display: block;
}

Answer 4

首先将您的表放在另一个宽度设置为100％的表中。
内部表设置为600并且中心保存所有内容
您不再需要在每个td上放置宽度或对齐。这会使你的电子邮件膨胀。
阻止工作。和valign top一样。
获得更好的结果！
抱歉，摆脱Div。表就是这样。小号
不要上课。
Cellpadding和Cellspacing是Dynamite和火炬。你打算搞砸东西。

HTML电子邮件，删除tr标签之间的间距？

4 个答案: