Question

我正在构建一个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

我尝试过不同的身高和身高，但似乎没有任何帮助。有人可以帮我修一下文字的位置吗？非常感谢你！

Answer 1

我已经用行高值解决了这个（更多）的问题。

在表格本身及其父表中定义了多个行高。我删除了父亲的行高，并更改了td行高和宽度的值，以修复Gmail应用中的对齐方式。

这是最终解决方案：

＆＃13;

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

＆＃13;

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

Answer 2

我认为这不起作用，因为在使用对齐和迷惑时，Outlook似乎很奇怪。

你将你的secound td对准了其余空间的中心。其余的宽度是15px。尝试将宽度添加到第二个表格，并将文本与text-align：center对齐; 。

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

同样对于身高，您可以尝试添加

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

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

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

对不起，我没有确切的答案，但我只能访问Outlook2010客户端。但也许这个有用，或者至少你有一些灵感。

电子邮件模板 - 背景图像与文本覆盖在确切位置

2 个答案: