电子邮件模板 - 背景图像与准确位置的文本叠加答案

【问题标题】：Email template - Background image with text overlay at exact location电子邮件模板 - 背景图像与准确位置的文本叠加
【发布时间】：2016-07-28 18:13:04
【问题描述】：

我正在构建一个 HTML 邮件，其中应该是一个顶部带有数字的图像。到目前为止，我已将图像添加为带有嵌套表格的 td-background 以定位文本。它在大多数电子邮件客户端中看起来都不错，除了…… Outlook。 Outlook 呈现文本 - 向右（Outlook 2003） - 太高（Outlook 2007 及更高版本）

示例：

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td background="https://s31.postimg.org/57s9ntmij/basket_3.png" bgcolor="#ffffff" width="35" height="30" valign="top" style="font-size: 0;">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:35px;height:30px;">
                <v:fill type="frame" src="https://e.kaartje2go.nl/public/Kaartje2go/8553f93ebcf5d20eb1da4a3b8abeaaba/basket_3.png" color="#ffffff" />
                <v:textbox inset="0,0,0,0">
                    <![endif]-->
                    <table cellpadding="0" cellspacing="0" border="0" width="30" style="line-height:20px;">
                        <tr>
                            <td width="20"></td>
                            <td height="15" align="center" valign="middle" style="font-size: 12px; font-family: 'Source Sans Pro', Arial, sans-serif; color:#ffffff;font-weight:700; line-height:20px;" >
                                2
                            </td>
                        </tr>
                    </table>
                    <!--[if gte mso 9]>
                </v:textbox>
            </v:rect>
            <![endif]-->
        </td>
    </tr>
</table>

HTML 可以在这里找到：http://codepen.io/anon/pen/kXpKRQ?editors=1000

我尝试了不同的高度和线高，但似乎没有任何帮助。有人可以帮我固定文本的位置吗？非常感谢！

【问题讨论】：

某些标签和 css 在电子邮件模板中不起作用。请参考这个解决方案freshmail.com/developers/best-practices-for-email-coding

标签： html css email outlook html-email

【解决方案1】：

我已经用 line-height 值解决了这个问题。

在表本身和他的父表中定义了多个行高。我删除了父级的 line-height 并更改了 td line-height 和 width 的值以修复 Gmail 应用中的对齐方式。

这是最终的解决方案：

<table width="35" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td background="https://s31.postimg.org/57s9ntmij/basket_3.png" bgcolor="#ffffff" width="35" height="30" valign="top" style="font-size: 0;">
      <!--[if gte mso 9]>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:35px;height:30px;">
            <v:fill type="frame" src="https://s31.postimg.org/57s9ntmij/basket_3.png" color="#ffffff" />
            <v:textbox inset="0,0,0,0">
               <![endif]-->
      <table cellpadding="0" cellspacing="0" border="0" width="35">
        <tr>
          <td width="14"></td>
          <td width="21" height="20" align="center" valign="middle" style="font-size: 12px; font-family: 'Source Sans Pro', Arial, sans-serif; color:#ffffff;font-weight:700; line-height:14px;">
            2
          </td>
        </tr>
      </table>
      <!--[if gte mso 9]>
            </v:textbox>
         </v:rect>
         <![endif]-->
    </td>
  </tr>
</table>

它在大多数电子邮件客户端（Outlook 120 DPI 除外..）中呈现良好

【讨论】：

添加 mso-line-height-rule: 完全；将有助于防止 Outlook（尤其是 2013 年）为您的单元格增加额外的高度。 Outlook 2013 关于 valign 也很有趣（尽管它默认为顶部而不是中间），但它会尊重垂直对齐的样式。我经常使用两者来确定。

【解决方案2】：

我认为这不起作用，因为使用 align 和 vagign 时 Outlook 似乎很奇怪。

您将第二个 td 对齐在其余空间的中心。其余的宽度是 15px。尝试将宽度添加到第二个表格并将文本与 text-align:center; 对齐.

如果这不起作用，您可以将第二个 td 的宽度设置为 0，并添加宽度为 15 的第三个 td。然后您可以使用第一个和第三个 td 的宽度来获取文本它属于哪里。

另外对于高度，您可以尝试添加一个

<td .. >
   <span style="line-height: 5px;"><br></span><br>2
</td>

这有点快和肮脏，但也许可以完成工作。这样你可以将 td 的高度设置为 12px 并删除所有 lineheight。

您也可以尝试向表格或 td 添加填充以使高度正确。

很抱歉，我没有确切的答案，但我只能访问 Outlook2010 客户端。但也许其中的某些东西是可行的，或者至少你得到了一些灵感。

【讨论】：