1

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

4

1 回答 1

3

您在td's 上应用了 line-height ，这是一个问题。我认为这与此有关。虽然您确实需要设置style="line-height:0px; font-size:0px;"包含td以解决 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>
于 2014-07-09T18:55:26.157 回答