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

时间:2014-07-09 17:56:25

标签: html email outlook html-email outlook-2013

升级到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>

1 个答案:

答案 0 :(得分:2)

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

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

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

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

最好尽可能使用实时副本和背景颜色,以最大限度地提高用户参与度,但这是您做出的决定;)

我还添加了一些通用的css修复程序,这应该解决Outlook在线和雅虎的一些问题。

希望这有用。

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