Question

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

这样做有什么可靠的技巧吗？我是电子邮件设计的新手。

Answer 1

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

<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>，然后使用font-size:1px; line-height:1px;"加{来嵌套带有额外“填充”列*的表格{1}}用于Outlook黑客攻击。

Answer 2

好吧，如果我想在电子邮件中使用分隔符，我只需使用</hr>标记并具有水平规则。

Answer 3

具有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>

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

Answer 4

假设您的分割线只有几个像素的厚度，我通常使用一个图像说10px x 40px，分割线垂直居中（虽然技术上1px x 40px可以工作）。然后我将图像拉伸到表格单元格的整个宽度。

它太高的原因是我也使用图像填充。额外的“不必要”像素不是太大问题，因为图像宽度<10px。

优点是这种技术允许您精确控制前后的垂直填充，并且还避免了Outlook中的最小单元高度问题，我认为这是19px高......

在HTML电子邮件中创建简单分隔符的最可靠方法是什么？

4 个答案: