Question

首先，在您将这篇文章标记为重复之前，请检查我的代码是否尚未实施。

好的，所以我一直试图解决这个问题，因为现在已经接近三周了，仍然无法解决这个问题。我试图为公司制作HTML签名，而我几乎就要结束了。因为他们需要使用自己的字体，我在嵌套表中使用图像切片。

虽然当我将签名从Outlook发送到Outlook时，它看起来应该是它应该的样子，在任何Web邮件服务中打开它会显示额外的间距并且表格单元格大于预期：

当我在浏览器中选择整个表格时，实际上可以看到的是什么：

我已尽力做好每一件事，但到目前为止没有任何事情能帮到我。这是我的代码：

TestingPage.html

Answer 1

首先，图像需要托管在某个地方（云，网站等）才能在有人打开您的邮件时显示，因为您不能每次都在电子邮件内容中附加它们。我建议您使用纯文本，因为某些网络邮件服务甚至电子邮件客户端都可以阻止图像，因此您的联系信息可能会被抑制（或者在html旁边制作文本版本）。策略可以集成在html邮件中（远程托管），但它会增加邮件大小，并且可能无法保证预期的显示。他们的字体看起来像谷歌的Coda ...... 其次，你需要定义托管图像的TD的高度，然后在图像上定义（使用内联样式）尝试使用style =＆＃34; max-height：XXpx＆＃34;其中XX与托管图像的TD大小相同（已定义的高度）。在内联样式中使用！important是强制性的，因为无论有多少css和其他规则，内联都是第一个被执行的。

Answer 2

问题的解决方案很简单，您没有为所有图像添加高度和宽度。我猜想左边的图像高度（87px），右边的三个图像的宽度为140，高度为29（87/3 = 29），并通过Litmus.com运行结果。通过增加图像的高度和宽度，单个电子邮件客户端以相同的方式显示签名。

使用此代码：

<table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse !important;">
  <tbody>
    <tr>
        <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
          <img height="87" width="43" src="images/uni_1.png" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important; background: yellow;" alt="Logo Dekre" border="0" valign="top" /> </td>
        <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top"> 
        <table width="140" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse !important;">
            <tbody>
                <tr>
                    <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
                      <img width="140" height="29" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important; background: red;" src="images/uni_2.png" valign="top" alt="" border="0" /> </td>
                </tr>
                <tr>
                    <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top"> <a href="mailto:mailovaadresa">
                      <img width="140" height="29" style="Margin:0 !important;border:1 !important;padding:0 !important;display: block !important;vertical-align:top !important; background: green;" src="images/uni_3.png" valign="top" alt="" border="0" /> </a> </td>
                </tr>
                <tr>
                    <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
                      <a href="http://www.dekre.cz/">
                        <img width="140" height="29" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important; background: blue;" src="images/uni_4.png" valign="top" alt="" border="0" /> </a> </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
  </tbody>
</table>

正如@Valentin R.所提到的，你需要在某处托管图像。您可以在域中的WordPress安装中托管它们。将这些图像路径复制到上面的代码中，它可以在任何地方使用。

出售智能墙的好运。

Outlook HTML电子邮件中的表间距

2 个答案: