Html Outlook 2014年版-图形电子邮件中的重叠图像_Html_Email_Outlook_Html Email_Outlook 2013

Html Outlook 2014年版-图形电子邮件中的重叠图像

html email outlook

Html Outlook 2014年版-图形电子邮件中的重叠图像,html,email,outlook,html-email,outlook-2013,Html,Email,Outlook,Html Email,Outlook 2013,升级至Office 2013。试图在Outlook 2013中发送图形电子邮件时，遇到了重叠图像切片的错误。这些电子邮件在2013年查看时会出现压缩，重叠导致图像或文本被切断我已经向雅虎、Gmail和Hotmail的私人帐户发送了测试，但没有发现任何问题，旧版本的Outlook仍然可以很好地显示模板这是在中间和底部部分显示的问题的外部屏幕截图：我们试图发送的每一封图形电子邮件都会出现这种情况。我希望以前有人碰到过这个问题。以下是我用于其中一个模板的代码： <html><s

升级至Office 2013。试图在Outlook 2013中发送图形电子邮件时，遇到了重叠图像切片的错误。这些电子邮件在2013年查看时会出现压缩，重叠导致图像或文本被切断

我已经向雅虎、Gmail和Hotmail的私人帐户发送了测试，但没有发现任何问题，旧版本的Outlook仍然可以很好地显示模板

这是在中间和底部部分显示的问题的外部屏幕截图：

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

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

img{display:block}
Affhousaug2014研讨会-最终

您在

td

上应用了一个线条高度，这是一个问题。我认为这与此有关。虽然您确实需要在包含

td

的页面上设置

style=“line height:0px；font size:0px；”“

，以解决outlook 2013的一些问题，但这仅适用于高度小于30px的图像。在这种情况下，它是不必要的，并且会导致您的

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>


Affhousaug2014研讨会-最终

谢谢你这个善良的陌生人。这似乎解决了我的问题。谢谢你抽出时间！：）+1正是包含图像的

上的线条高度使我的图像忽略了其上方

的垂直填充并重叠。