桌子高度超过图片

Question

为了让我的电子邮件看起来更“专业”，我想创建一个外观整洁的签名。现在进行测试，我首先要创建一个简单的签名。如果我掌握了窍门，就将其扩展为更好的。

我似乎无法“重置”或清理表格。但我无法弄清楚问题是什么......任何帮助将不胜感激！

对于初学者，我想创建一个签名like this：

我创建了一个包含简单代码的 html 文件（包括 css）。见下文。我一直遇到的问题是，由于某种原因，当我在其中一个单元格中插入图像时，表格的高度似乎更大（仅在底部）。 See problem。

如您所见，桌子的高度超过了图片的高度。我不知道如何解决这个问题......

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
  <style>
    table, td, tr {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
}

table {
    width: 400px;
}

img {
    padding: 0;
    margin: 0;
}

#Avatar {
    width: 80px;
    height: 80px;
}

#Whitespace {
    width: 2px;
}

#BlueBar {
    width: 6px;
    background-color: #0CF;
    margin: 20px;
}

</style>
</head>

<body>
<table>
  <tr>
    <td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
    <td rowspan="3" id="Whitespace">&nbsp;</td>
    <td rowspan="3" id="BlueBar">&nbsp;</td>
    <td rowspan="3" id="Whitespace">&nbsp;</td>
    <td>Tekst</td>
  </tr>
 <tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>

Answer 1

在解决您的问题方面，您可能需要重新查看表格的结构。 HTML 电子邮件和签名的开发可能非常困难，因为许多电子邮件客户端的响应不同，支持级别也不同。

Campaign Monitor 创建了用于电子邮件客户端使用的 HTML、CSS 和 JS 编写指南，可在此处找到：https://goo.gl/oo1tcU

支持如此多样，“安全”元素和属性很少，而且活动监视器的指南很遗憾没有包含有缺陷的 HTML 属性列表。例如，我个人经历过许多电子邮件客户端中的行跨度和列跨度无法正常工作，因此我根本不建议使用它们。而是绘制一个具有相同结构的网格，并使用具有定义的 HTML 宽度和高度属性的空标签来使表格适合您。

不幸的是，在所有客户端步骤中使签名看起来完全相同，例如使用空但定义的标签是必要的，或者某些客户端将简单地添加 colspan 正在运行的 's。

在 HTML 电子邮件/签名中，您必须定义所有内容以确保没有任何变化，我在所有项目开始时使用的表格标签看起来像这样：

<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
            style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
            background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >

同样对于所有图片，使用如下标签并在 HTML NOT CSS 中定义宽度和高度。

<img src="" alt="" width="" height="" style="display: block; border: none;"/>

电子邮件客户端会导致您像 1990 年代那样编写 HTML，这非常令人沮丧，但如果没有这样的考虑，您可能会在一个客户端中获得您想要的结果，但如果您发送给另一个客户端，您的签名在收件人看来会有所不同。当您试图提高您的专业水平时，我认为这不是您所希望的！

我建议的另一个技巧是使用尽可能多的图像（并记住在 HTML 中定义宽度和高度），因为如果定义正确，则使用定义的每个 td 和 img 标签宽度和高度构建的结构几乎永远不会改变。这是有益的，因为文本字体的支持也很低，除非它们是标准字体，例如宋体！

最后只使用内联样式，许多客户端会去掉 head 标签中的任何内容！