Question

我搜索了网络和这个视线，并尝试了所有可能的解决方案，仍然无法弄清楚为什么Outlook 2007-2013在我的图像上方创建了一个白色条带。

以下是完整电子邮件的链接：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>

Answer 1

我相信您需要为每张图片添加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;" />

Answer 2

<img alt="Image Description Goes Here" border="0" src="http://www.your-image-url-goes-here.jpg" 
width="600" height="176" style="padding:0px; display: block; line-height: 0px; font-size: 0px; border:0px;" 
align="top">

您需要拥有... align="top" ...代码。这会强制图像在顶部对齐。通过将所有其他代码维度设置为0px，它将空白区域指定为0px。此外，display:block对于删除空白区域非常重要，因此浏览器知道如何显示图片的布局和格式。

我测试了此代码，它删除了Gmail，AOL，Yahoo，Hotmail和我的远程Outlook电子邮件帐户中的空白区域。希望这有帮助！

如何删除HTML电子邮件中图像上方的空白区域？

2 个答案: