html - 电子邮件模板 - 背景图像与文本叠加在确切位置

Question

我正在构建一个 HTML 邮件，其中应该是一个图像，上面有一个数字。 到目前为止，我已将图像添加为 td 背景，并使用嵌套表格来定位文本。它在大多数电子邮件客户端中看起来都不错，除了… 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

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

Answer 1

我已经用行高值解决了这个问题(更多)。

在表本身及其父表中定义了多个行高。我删除了父级的行高并更改了 td 行高和宽度的值以修复 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 除外......)