2

我尝试使用具有单列的表格行，该列仅包含空锚元素并具有背景颜色。这适用于某些客户，但我不会说大多数。我也尝试过设置列和行的边框底部，但这也有非常复杂的结果。另一种选择是使用图像...

有什么可靠的技术可以做到这一点吗？我对电子邮件设计相当陌生。

4

4 回答 4

4

有几种方法，如果你想要一个段落下的水平“规则”，整个段落宽度你可以：

<td bgcolor="#ffffff" style="border:none; border-bottom: 1px solid #cccccc;">My text plus at least two break tags for padding <br /><br /></td>

或者

<tr>
<td bgcolor="#FFFFFF" style="Verdana;">Some content text here with no break tag after it.</td>
</tr>
<tr>
<td height="1" bgcolor="#ffffff" style="border:none; border-bottom: 1px solid #cccccc; font-size:1px; line-height:1px;">&nbsp;</td></tr>

第二种方法可能会在布局中添加两个像素，具体取决于使用的电子邮件客户端和渲染方法。但是更可靠，因为您可以将高度设置为在文本下形象地添加“填充”。（填充在所有电子邮件客户端中单方面的工作方式不同）。

对于更复杂的“填充”选项，我建议将其添加border-bottom到封闭<td>然后嵌套一个带有额外“填充”列的表格*使用 Outlook hack 的font-size:1px; line-height:1px;"加号&nbsp;。

于 2013-03-20T12:46:27.283 回答
0

具有所需颜色的 1px 边框的表格单元格是我发现的最可靠的渲染方式。

<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" style="margin:0;padding:0;">
<tr>
<td style="border-bottom:1px solid #ffffff;">
Content Here
</td>
</tr>
</table>

相关，我发现边框不适用于所有电子邮件客户端中的图像。

于 2013-03-20T12:45:11.310 回答
0

好吧，如果我想在电子邮件中使用分隔符，我将简单地使用</hr>标签并使用水平规则。

于 2013-03-20T12:03:18.890 回答
0

假设您的分隔线只有几个像素粗，我通常使用 10 像素 x 40 像素的图像，分隔线垂直居中（尽管从技术上讲 1 像素 x 40 像素可以）。然后我将图像拉伸到表格单元格的整个宽度。

它这么高的原因是我也使用图像进行填充。额外的“不必要”像素并不是什么大问题，因为图像的宽度小于 10 像素。

优点是这种技术可以让您精确控制前后的垂直填充，还可以避免 Outlook 中的最小单元格高度问题，我认为它是 19px 高...

于 2013-03-20T12:57:02.990 回答