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>

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

1 个答案: