HTML 时事通讯 - 不同版本的 Outlook 修复

Question

我正在处理 HTML 时事通讯/电子邮件，并且对不同版本的 Outlook(2007、2010、2011、2013)有疑问。我想要的布局适用于我们测试过的所有其他客户端(使用“交付能力测试”显示它在客户端中的外观)。

差异图片链接:

http://jimharrison.co.uk/wp-content/uploads/2013/10/outlook.jpg

我的目标是:让手机底部位于最后一个“联盟积分”文本上。

注意:图像设置为拉伸(stretch)到 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;">&nbsp;</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>

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

我很难对此进行测试，但它应该 有效。 . .我总是发现将图像放入电子邮件的不同单元格中非常有效。