0

我已经搜索了网络和这个景象并尝试了所有可能的解决方案，但仍然无法弄清楚为什么 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>
4

2 回答 2

4

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

于 2013-04-09T16:34:59.577 回答
0 
<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 电子邮件帐户中的空白。希望这会有所帮助！

于 2014-10-07T17:08:20.387 回答