经过多个小时的挖掘和测试后,我找不到如何解决这个bug。
您是否可以在图像上看到Outlook 2013上显示的额外空间,以及2007/2010年展望中的轻微空间。
电子邮件来源:http://a-part.fr/mailing/test/test.html
exemple http://a-part.fr/mailing/test/preview-image-outlook-2013.png
jsfiddle:http://jsfiddle.net/fmj5osk8/
<table class="bodyTable" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="background-color:#ffffff; color:#000000;font-family:'Times New Roman', Times, serif;font-size: 14px;border-collapse:collapse;margin:auto;border-spacing: 0;" >
<tr>
<td width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">
<table class="header" width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;" >
<tr>
<td height="158" style="vertical-align: top;overflow:hidden;height:158px;line-height: 0; mso-line-height-rule:exactly;" >
<img style="display: block" src="http://a-part.fr/mailing/test/img/header.jpg" alt="test" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">
<table width="600" height="69" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;">
<tr align="center" >
<td height="69" width="119" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
<img style="display: block" src="http://a-part.fr/mailing/test/img/l_titre.jpg" />
</td>
<td height="69" style="vertical-align: top;overflow:hidden;" >
<h1 style="font-size: 20px;padding:0;margin:0;margin-top:0;margin-bottom: 5px;color:#E9E00B;" >
Dolor si amet
</h1>
<span style="font-style: italic;padding:0;margin:0;">
dolor si amet
</span>
</td>
<td height="69" width="43" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
<img style="display: block" src="http://a-part.fr/mailing/test/img/r_titre.jpg" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;">
<tr align="center" >
<td width="55" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
<img style="display: block" src="http://a-part.fr/mailing/test/img/l_h_text.jpg" />
</td>
<td align="left" style="vertical-align: top;overflow:hidden;" >
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend mauris eget bibendum condimentum. Integer dapibus eu magna ac gravida. Donec volutpat auctor nisi in mattis. </p>
<h2 style="font-size: 16px;margin-bottom: 5px;">Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend mauris eget bibendum condimentum. Integer dapibus eu magna ac gravida. Donec volutpat auctor nisi in mattis. </p>
<h2 style="font-size: 16px;margin-bottom: 5px;">Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend mauris eget bibendum condimentum. Integer dapibus eu magna ac gravida. Donec volutpat auctor nisi in mattis. </p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend mauris eget bibendum condimentum. Integer dapibus eu magna ac gravida. Donec volutpat auctor nisi in mattis. </p>
<div style="margin:0px;padding:10px;border:3px solid yellow;border-radius:5px;text-align: center;">
<h3 style="font-size: 14px;margin-bottom: 5px;margin-top:5px;">Lorem ipsum:</h3>
Lorem ipsum dolor <br />
Lorem dolor si amet bibendum<br />
</div>
</td>
<td width="55" style="vertical-align: top;overflow:hidden;" >
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;">
<tr align="center" >
<td height="62" width="55" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
<img style="display: block" src="http://a-part.fr/mailing/test/img/l_b_text.jpg" />
</td>
<td height="62" style="vertical-align: middle;overflow:hidden;" >
<h2 style="font-size: 16px;padding:0;margin:0;margin-bottom: 5px;">Dolor si amet</h2>
</td>
<td height="62" width="55" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">
<table width="600" height="110" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;">
<tr align="center" >
<td height="110" width="195" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
<img style="display: block" src="http://a-part.fr/mailing/test/img/l_footer.jpg" />
</td>
<td height="110" style="vertical-align: top;overflow:hidden;" >
<p style="font-size: 14px;margin:0px;">
Dolor si amet,<br />
<b style="line-height: 25px; mso-line-height-rule:exactly;">L’équipe de test</b><br />
<span>dolor si amet</span><br />
<span style="line-height: 25px; mso-line-height-rule:exactly;">07 25 54 54 54 </span><br />
<a href="http://www.test.fr" style="color:#000000;text-decoration:none;">www.test.fr</a><br />
</p>
</td>
<td height="110" width="206" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
<img style="display: block" src="http://a-part.fr/mailing/test/img/r_footer.jpg" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;" >
<tr>
<td height="99" style="vertical-align: top;overflow:hidden;height:99px;line-height: 0; mso-line-height-rule:exactly;" >
<img style="display: block" src="http://a-part.fr/mailing/test/img/b.jpg" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">
<!-- désinscription mailjet -->
<p style="text-align: center;color:#000000;text-decoration:none;">
<a href="[[UNSUB_LINK_FR]]">Se désabonner</a>
</p>
<!-- fin désinscription mailjet -->
</td>
</tr>
</table>
答案 0 :(得分:1)
在你不需要的细胞上摆脱所有这些额外的废话,特别是那些包含图像的细胞: style =&#34; vertical-align:top; overflow:hidden; line-height:0; MSO的行高规则:恰好;&#34;
为我解决了这个问题:)
答案 1 :(得分:0)
我发现添加style =&#34; font-size:0%;&#34;在仅包含图像的TD中解决此问题。
所以聊聊:https://litmus.com/community/code/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom