Outlook 2014 问题 - 图形电子邮件中的重叠图像答案

【问题标题】：Outlook 2014 Issue - Overlapping Images in Graphic EmailsOutlook 2014 问题 - 图形电子邮件中的重叠图像
【发布时间】：2014-08-30 21:25:12
【问题描述】：

升级到 Office 2013。尝试在 Outlook 2013 中发送图形电子邮件，并遇到重叠图像切片的错误。在 2013 年查看时，电子邮件看起来很紧凑，并且重叠导致图像或文本被截断。

我已将测试发送到私人 Yahoo、Gmail 和 Hotmail 帐户，没有发现任何问题，旧版本的 Outlook 仍然可以正常显示模板。

这是问题的外部屏幕截图，显示在中间和底部：http://imgur.com/jhPwwcF

我们尝试发送的每封图形电子邮件都会发生这种情况。我希望有人以前遇到过这个确切的问题。这是我用于其中一个模板的代码：

<html><style>img{display:block}</style> 
 <head>
     <title>AffHousAug2014Seminars---Final</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
     <!-- Save for Web Slices (AffHousAug2014Seminars---Final.gif) -->
     <table id="Table_01" width="620" height="658" border="0" cellpadding="0" cellspacing="0">
         <tbody>
             <tr>
                 <td colspan="2">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_01.gif" width="620" height="181" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
             </tr>
             <tr>
                 <td colspan="2">
                 <a href="http://taa.org/" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_02.gif" width="620" height="48" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
             </tr>
             <tr>
                 <td style="line-height: 0">
                 <a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/13/592/-/income-eligibility-training-aka-tdhcas-first-thursday-training-beaumont" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_03.gif" width="311" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                 <td style="line-height: 0">
                 <a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/14/593/-/htc-compliance-training-beaumont" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_04.gif" width="310" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
             </tr>
             <tr>
                 <td colspan="2">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_05.gif" width="620" height="254" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
             </tr>
             <tr>
                 <td style="line-height: 0">
                 <a href="mailto:education@taa.org" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_06.gif" width="311" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                 <td style="line-height: 0">
                 <a href="http://taa.org/" target="_blank">
                 <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_07.gif" width="310" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
             </tr>
         </tbody>
     </table>
     <!-- End Save for Web Slices -->
 </body>

【问题讨论】：

标签： html email outlook html-email outlook-2013

【解决方案1】：

您在td 上应用了行高，这是一个问题。我认为这与此有关。虽然您确实需要在包含 td 上设置 style="line-height:0px; font-size:0px;" 以解决 Outlook 2013 的一些问题，但这仅适用于高度小于 30 像素的图像。在这种情况下，这是不必要的，并且会导致您的 td 截断您的图像。

我在下面编辑了您的代码，使其更符合电子邮件要求。这应该可以解决您可能遇到的其他一些问题。

首先，您不应该使用colspan/rowspan，因为这会在旧版浏览器中导致呈现问题。您应该改用嵌套表，就像我在下面的代码中所做的那样。

此外，要覆盖浏览器对齐设置，建议为您的所有td 添加对齐和垂直对齐。同样，这在下面的代码中。

如果可能的话，最好使用实时副本和背景颜色，以最大限度地提高您的用户参与度，但这是您自己的决定；）

我还为您添加了一些通用的 CSS 修复程序，这应该可以解决 Outlook Online 和 yahoo 的一些问题。

希望这有帮助。

    <html>
     <head>
         <title>AffHousAug2014Seminars---Final</title>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
        .ReadMsgBody, .ExternalClass { width: 100%;}
        .ExternalClass * { line-height: 110%; }
        body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; }
        table { border-collapse:collapse !important; mso-table-lspace:0pt; mso-table-rspace:0pt; }
        img{ display:block; }
    -->
    </style>

     </head>
     <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
         <!-- Save for Web Slices (AffHousAug2014Seminars---Final.gif) -->
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
           <tbody>
             <tr>
               <td align="center" valign="top"><table id="Table_01" width="620" border="0" cellpadding="0" cellspacing="0">
                 <tbody>
                   <tr>
                     <td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_01.gif" width="620" height="181" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
                   </tr>
                   <tr>
                     <td align="left" valign="top"><a href="http://taa.org/" target="_blank"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_02.gif" width="620" height="48" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                   </tr>
                   <tr>
                     <td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="Table_">
                       <tbody>
                         <tr>
                           <td align="left" valign="top"><a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/13/592/-/income-eligibility-training-aka-tdhcas-first-thursday-training-beaumont" target="_blank"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_03.gif" width="311" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                           <td align="left" valign="top"><a href="http://taa.org/member/calendar/icalrepeat.detail/2014/08/14/593/-/htc-compliance-training-beaumont" target="_blank"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_04.gif" width="310" height="94" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                         </tr>
                       </tbody>
                     </table></td>
                   </tr>
                   <tr>
                     <td align="left" valign="top"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_05.gif" width="620" height="254" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></td>
                   </tr>
                   <tr>
                     <td align="left" valign="top"><table width="100%" border="0" cellpadding="0"  cellspacing="0">
                       <tbody>
                         <tr>
                           <td align="left" valign="top"><a href="mailto:education@taa.org" target="_blank"> <img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_06.gif" width="311" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                           <td align="left" valign="top"><a href="http://taa.org/" target="_blank"><img src="http://host8.harvestmanager.com/mx/accounts/taa/ec/files/AffHousAug2014Seminars---Final_07.gif" width="310" height="61" style="margin: 0; border: 0; padding: 0; display: block;" alt="" /></a></td>
                         </tr>
                       </tbody>
                     </table></td>
                   </tr>
                 </tbody>
               </table></td>
             </tr>
           </tbody>
         </table>
         <!-- End Save for Web Slices -->
     </body>

【讨论】：

谢谢你好心的陌生人。这似乎解决了我的问题。我很感激你的时间！ :)
+1 这是包含图像的<td> 上的行高，这使我的图像忽略了其上方<td> 的垂直填充并重叠。