HTML MAIL - Outlook 2013 中图像之间的 1px 垂直间距答案

【问题标题】：HTML MAIL - 1px vertical space between images in outlook 2013HTML MAIL - Outlook 2013 中图像之间的 1px 垂直间距
【发布时间】：2013-09-27 13:06:55
【问题描述】：

在 gmail、hotmail vb 中看起来不错，但我无法解决 Outlook 中的空间问题。它仅显示图像之间的 1px 空白，并且仅垂直显示。任何帮助将不胜感激，谢谢。

这是我的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
</head>
<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr align="center">
            <td>
                <table border="0" cellspacing="0" cellpadding="0" style="width: 700px; border-spacing: 0px; font-family: Arial; margin: 0 auto; display: block; border-collapse: collapse">
                    <tr>
                        <td>
                            <img src="1.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="2.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="3.jpg" alt="mail" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="4.jpg" alt="mail" />
                        </td>
                        <td>
                            <a href="#">
                                <img src="5.jpg" alt="mail" /></a>
                        </td>
                        <td>
                            <img src="6.jpg" alt="mail" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="7.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="8.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="9.jpg" alt="mail" />
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</body>
</html>

【问题讨论】：

标签： outlook html-email outlook-2013

【解决方案1】：

我会首先尝试将display: block; 作为内联样式添加到图像中，并为表格添加border-collapse: collapse; 也作为内联样式。

如果这不能解决空格问题，那么您接下来应该尝试一些专门适用于 Outlook 的技术。 Email on Acid. 上有一篇关于修复 Outlook 表格的额外空间问题的非常深入的文章

您可能还想尝试在 td 标记内使用更多嵌套表。

【讨论】：

像这样<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="" height="" alt=""> 设置您的图像标签。显示块对于 Outlook 来说是最重要的。此外，border-collapse 不需要是内联的，如果你愿意，它可以在 header 样式标签中。
这对我不起作用。有没有人有一个可行的例子？

【解决方案2】：

我多次遇到这个问题。简单的修复。在保存图像的 tds 上应用 font-size 和 line-height。它将删除空间。使用小于图像高度的字体大小和行高。

display:block 也很重要。绝对需要。

【讨论】：

@Mr.Alien 字体大小和行高只有在表格单元格高度小于 19 像素时才起作用。所以这只是如果图像的高度小于 19px 的正确答案，否则 juissa 关于 display:block; 的答案是正确的。在技术上是正确的......
@John 我的邮件在表格单元格中只有图像，添加 display: block; 并没有帮助我摆脱空格，但这确实
@Mr.Alien 您的图片高度是否低于 19 像素？我从来不需要使用 line-height 或 font-size 解决方法，（我在 Outlook 中进行了很多测试）所以它可以解决这个问题很有趣......
@John 不，它变化了，从 20px 到 150px，而且，前景很好，是 gmail 造成了空白，而且，不是 gmail 中的 html 界面，而是带有主题的界面，普通的gmail
大图有解决办法吗？我的一张图片上有一条 1px 的垂直线，我已经尝试修复它好几个小时了！ :(