Question

我有下表用于为html电子邮件内容分组图像

    <table cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2">
                <img src="/SaveDateHeader.png" style="border: none;font-size: 14px;font-weight: bold;height: auto;line-height: 100%;outline: none;text-decoration: none;text-transform: capitalize;" />
            </td>
        </tr>
        <tr><td colspan="2"><img src="/body.png" style="border: none;font-size: 14px;font-weight: bold;height: auto;line-height: 100%;outline: none;text-decoration: none;text-transform: capitalize;" /></td></tr>
        <tr>
            <td>
                <a href="" target="_blank">
                    <img src="/leftfooter.png" style="border: none;font-size: 14px;font-weight: bold;height: auto;line-height: 100%;outline: none;text-decoration: none;text-transform: capitalize;" />
                </a>
            </td>
            <td>
                <a href="" target="_blank">
                    <img src="/rightfooter.png" style="border: none;font-size: 14px;font-weight: bold;height: auto;line-height: 100%;outline: none;text-decoration: none;text-transform: capitalize;" />
                </a>

            </td>
        </tr>
    </table>

在Outlook和移动设备上看起来很好，但是当我在gmail.com上查看它时，表格行之间会出现空格。

我的第一种方法是使用浮动div，但在移动设备上查看时会遇到一系列不同的问题。

我发现了这个问题，但没有一条建议对我有用。 How to remove the divide between table rows in e-mail shot?

Answer 1

要为所有图片添加"display: block;"。我怀疑它实际上是一个图像问题。此外，您必须在电子邮件中进行基于表格的布局。不要试图使用现代策略！一切的表和内联样式。另外，尝试折叠一些空白区域。

如何删除电子邮件中发送的表格行之间的白线？

1 个答案: