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