HTML MAIL - outlook 2013中图像之间的1px垂直空间

时间:2013-09-27 13:06:56

标签: outlook html-email outlook-2013

它在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>

2 个答案:

答案 0 :(得分:5)

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

如果这不能解析空格,那么有一些技术专门适用于Outlook,您应该尝试下一步。有关于使用Email on Acid.

上的Outlook表修复额外空间问题的非常深入的文章

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

答案 1 :(得分:2)

我多次遇到过这个问题。虽然简单修复。 在保持图像的tds上应用字体大小和行高。它将删除空间。使用小于图像高度的字体大小和行高。

显示:块也非常重要。绝对需要。