如何在 Outlook 2010、Outlook 2007、Outlook 2013 中的图像顶部的文本上提供填充/边距？

Question

我正在尝试在图像顶部添加文本，如下所示。它适用于除 Outlook 2010、Outlook 2007、Outlook 2013 之外的所有电子邮件客户端。这三个客户端都忽略了填充。我到处找都试过了:(请帮我把文字放在图像顶部，这样它就剩下 147px 和 107px 顶部填充/边距/？

最终解决如下：

 <tr>
        <td background="yourimage.gif" bgcolor="#c0393f" width="600" height="240" valign="top" style="background:url('yourimage.gif')">
            <!-- M$ hack for table background images -->
            <xsl:comment>
                <![CDATA[[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" color="#c0393f" style="width:600px;height:240px;">
                    <v:fill type="frame" src="yourimage.gif" />

                    <v:textbox inset="107px,147px,0px,0px" id="headerTitle">
                    <![endif]]]>
            </xsl:comment>
            <font style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;">
                <div style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;padding:147px 0px 0px 107px;">
                    Your Text
                </div>
            </font>
           <xsl:comment>
                <![CDATA[[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]]]>
            </xsl:comment>
        </td>
    </tr>

Answer 1

在 Outlook 中忽略了 div 填充。最好的办法是在 div 中插入一个表格，然后在其中填充 TD。

您的代码中还有一些其他错误，我在下面进行了更改，但这在 Outlook 中有效。我还建议使用 padding-top 等，而不仅仅是填充，因为我发现它在电子邮件客户端中被更广泛地接受和一致。

     <table width="640" height="240">
<tr>
<td background="http://www.swagatobhatta.info/emailtest/header.gif" width="600" height="240" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
    <v:fill type="tile" src="http://www.swagatobhatta.info/emailtest/header.gif" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
   <table width="400" align="right" cellpadding="0" cellspacing="0" border="0" style="color:#c9be8a;font-weight:700;font-size:19px;width:400px;">
        <tr>
        <td style="text-transform:uppercase;padding-top:107px; padding-left:147px;">TEST CONTENTS TEST CONTENTS TEST CONTENTS</td></tr>
        </table></div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
                        </tr>
                    </table>