HTML电子邮件 - Outlook 2013中图像之间的差距 [英] HTML email - gaps between images in Outlook 2013

问题描述

我正在撰写一个HTML电子邮件，看起来很好，除了Outlook 2013之外的每个主要的电子邮件客户端，这都增加了我的图像片段之间的垂直间距。我不幸的是没有在我的电脑上安装Outlook 2013，所以它很难测试，但我的客户端屏幕截图表明它看起来像这样 -

I'm composing an HTML email which looks fine in every major email client except Outlook 2013, which is adding vertical gaps between my image slices. I unfortunately don't have Outlook 2013 installed on my computer so it's making it hard to test, but a screenshot from my client suggests that it looks like this -

我的代码在这里可用 - HTML版本。

My code is available here - HTML version.

我不知道我能做些什么来摆脱差距 - 我已经将tds和图像的行高设置为零，我已经设置要显示的图像：块，我将表设置为0，cellpadding和cellspacing为零，并且border-collapse：collapse。还有什么可以解决的？

I have no idea what more I can do to get rid of the gaps - I've set line-height for the tds and images to zero, I've set the images to display: block, I've set the tables to border 0, cellpadding and cellspacing zero, and border-collapse: collapse. What else can I do to fix it?

已编辑添加 - 我实际上不确定图像或表格行之间的差距。从屏幕截图看，它实际上可能是表行。

Edited to add - I'm actually not sure if the gaps are between images or table rows. From the screenshot it actually looks like it might be the table rows.

推荐答案

问题解决 - 将包含图像的tds的线高度更改为图像的高度，而不是0，解决差距，不会破坏其他客户端的布局。所以

Problem solved - changing the line-height of the tds containing the images to the height of the image, rather than 0, resolves the gaps and doesn't break the layout in other clients. So

    <td width="150" style="line-height: 83px;">
       <img src="" height="83px">
    </td>

这篇关于HTML电子邮件 - Outlook 2013中图像之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！