我已经搜索了网络和这个景象并尝试了所有可能的解决方案，但仍然无法弄清楚为什么 Outlook 2007-2013 在我的图像上方创建了一个白色 strip 。
这是完整电子邮件的链接:http://www3.districtadministration.com/mailing/Templates/da-webinar-archives.html
这是我的代码:
<table id="webinars" cellpadding="0" cellspacing="0" width="100%" style="border:1px solid #e6e6e6;">
<tr style="background-color:#f2f2f2;border-bottom:#e6e6e6;">
<td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
<a href="[WEBINAR TITLE #1]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
Sponsored by add sponsor
</td>
<td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #1]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
</td>
</tr>
<tr style="border-bottom:#e6e6e6;">
<td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
<a href="[WEBINAR TITLE #2]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
Sponsored by add sponsor
</td>
<td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #2]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
</td>
</tr>
<tr style="background-color:#f2f2f2;border-bottom:#e6e6e6;">
<td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
<a href="[WEBINAR TITLE #3]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
Sponsored by add sponsor
</td>
<td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #3]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
</td>
</tr>
<tr style="border-bottom:#e6e6e6;">
<td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
<a href="[WEBINAR TITLE #4]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
Sponsored by add sponsor
</td>
<td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #4]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
</td>
</tr>
</table>
最佳答案
我相信您需要为每张图片添加 display:block。
旧代码:
<img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" />
新代码:
<img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" style="display:block;" />
关于css - 如何删除 HTML 电子邮件中图像上方的空白区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15906348/