我正在撰写HTML简报/电子邮件，并对不同版本的Outlook（2007年，2010年，2011年，2013年）提出疑问。我想要的布局适用于我们测试的所有其他客户端（使用“可传递性测试”，显示它在客户端中的外观）。
链接到差异的图像：
http://jimharrison.co.uk/wp-content/uploads/2013/10/outlook.jpg
我的目标是：让手机的底部位于最后一个'联盟点'文本上。
注意：图像设置为拉伸至100％。
Outlook 2011：图像刚好在。
Outlook 2007,2010：图像远离底部，但图像顶部已正确对齐。
Outlook 2013：图像离开了，左边的“联盟点”之间也有不必要的间距。
代码：
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="scaleForMobile">
<tr>
<td width="100%">
<!-- Column 1 -->
<table width="257" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="left" class="imageScale1">
<tr>
<td width="100%" height="10" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">
<span class="heading" style="font-size: 22px; color: #3B80C1; line-height: 22px;">It's time <br>to step it up a gear</span><br><br>
Starting on 1st November and running through to 29th December we've got "<span class="heading" style="color: #3B80C1;">Shake It Up Rio</span>" with Samsung offering 34 people the chance to soak up the sun in Rio, Brazil! As well as having the chance to party to the Samba beat, we also have weekly Best Incentive Points for Stores and Sales Advisors to win!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">Sell the Samsung Galaxy Note 3 smartphone and Galaxy Gear smartwatch, as well as the handsets listed below to earn league points and work your way up the league table!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Note 3 and Galaxy Gear
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
10 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
5 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4 mini
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
3 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Ace 3
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
1 League Points
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Padding + (Outlook) -->
<table class="eraseForMobile" width="1" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<tr>
<td width="0" height="2" style="font-size: 0;line-height: 0;border-collapse: collapse;"><p style="padding-left: 10px;"> </p>
</td>
</tr>
</table>
<!-- Column 2 -->
<table width="270" border="0" cellpadding="0" cellspacing="0" align="right" class="imageScale2" bgcolor="#ffffff">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" class="mobileCenter">
<a href="#" target="_blank;"><img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/galaxy_note_3.jpg" alt="galaxy note 3 and gear" width="100%" border="0" class="imageScale" style="display: block;"></a>
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
</tr>
</table>
答案 0 :(得分：1)
试试这个：
<tr>
<td width="50%" valign="top" bgcolor="#ffffff" class="mobileCenter">
... text ...
</td>
<td width="50%" valign="bottom" bgcolor="#ffffff">
<a href="#" target="_blank;"><img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/galaxy_note_3.jpg" alt="galaxy note 3 and gear" width="100%" border="0" class="imageScale" style="display: block;"></a>
</td>
</tr>
我很难对此进行测试，但应该工作。 。 。 我总是发现将图像放入不同的单元格中以使电子邮件非常有效。
答案 1 :(得分：1)
解决此问题：
只需移除width属性并为其提供必要的高度以适应文本。
因为它是一个响应式电子邮件，这个修复程序并不完美/理想（我不得不在图像上使用CSS来使其正确缩放），但它仍然是一个修复。