3

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

这是gmail中间距的图像：

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>
4

5 回答 5

9

style="display:block"通过向图像添加 a 解决了该问题。

于 2013-09-03T16:50:02.510 回答
1

将您的代码更改为：

<!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>
于 2013-09-03T16:59:03.200 回答
1

要删除 tr 标签之间的空格，只需添加border-collapse:collapse; 到您的表格标签。就像电子邮件中的表格一样，您可以将其添加为：

<table style="border-collapse: collapse;">
于 2015-07-15T16:01:41.143 回答
0

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

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

或为 img 本身

thead tr:first-child td img
{
display: block;
}
于 2013-09-03T16:50:22.370 回答
0
  1. 首先将您的表格放在另一个宽度设置为 100% 的表格中。
  2. 内部表设置为 600 并且是中心容纳所有内容
  3. 您不再需要在每个 td 上放置宽度或对齐。那是膨胀你的电子邮件。
  4. 块工程。和 valign 顶部一样。
  5. 取得更好的成绩！
  6. 对不起，摆脱Div。桌子就是这样。s
  7. 不要使用类。
  8. Cellpadding 和 Cellspacing 是炸药和火炬。你会炸毁东西。
于 2015-02-20T19:13:02.553 回答