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

我尝试使用一个表中只包含空锚元素并具有背景颜色的列。这在一些客户中有效，但我不会说最多。我也尝试设置列和行的边界底部，但这也有不同的结果。另一种选择是使用图像...什么是在HTML电子邮件中创建简单分隔符的最可靠方法？

是否有任何坚实的技术来做到这一点？我对电子邮件设计相当陌生。

来源

2013-03-20 bernk

那么，如果我想要在电子邮件中的分频器，我会简单地使用</hr>标签，并有一个水平的规则。

来源

2013-03-20 12:03:18

谢谢，我会尽力，但我不认为造型的横向规则会得到很好的支持...... – bernk 2013-03-20 12:06:32

好的，请让我知道！如果你想风格的边框，然后使用CSS边框是我认为的最佳选择。 – 2013-03-20 12:07:47

是不是它以前是，因为HTML5到达：http://html5doctor.com/small-hr-element/ – 2014-09-18 10:12:48

具有所需颜色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-20 12:45:11 samanthasquared

我也试过这个，但边界一直在一些版本的Outlook中：（ – bernk 2013-03-20 13:52:50

什么版本？我在'03，'07或'10没有问题。 – samanthasquared 2013-03-20 14:16:23

它在2010年和2013年，但不是在2011年。2013年的回报绝对是可怕的，特别是与2010年相比。这是基于Litmus测试和截图客户端，它们是相同的 – bernk 2013-03-21 08:25:45

有几种方法，如果你想有一个段落，全款宽下水平“规则”，您可以：

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

第二种方法可能会增加两个像素根据使用哪个电子邮件客户端和呈现方法将其转换为布局。但是更加可靠，因为你可以设置高度来形象地在文本下面添加“填充”。（Padding在所有电子邮件客户端单方面都不起作用）。

对于更复杂的“填充”选项，我建议加入border-bottom一个封闭<td>再嵌套一个表有额外的“填充”列*使用Outlook的font-size:1px; line-height:1px;"加 黑客。

来源

2013-03-20 12:46:27 artcase

对于第一个示例，我建议稍微编辑一下，当在表格单元格的开始或结尾处用作填充时，将在Outlook中折叠'
'或'
'。您应该在开始处使用'
'而在最后使用'
'而不是为了避免这种情况。文本之间的双重休息仍然正常。 – John 2013-03-22 16:21:09

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

它那么高的原因是我也使用图像进行填充。额外的'不必要的'像素并不是太大的问题，因为图像是10px宽的<。

的优点是，这种技术可以让你之前和之后精确控制垂直填充，同时也避免了在Outlook中最小的细胞高度问题，我认为这是19px高...

来源

2013-03-20 12:57:02 John

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

回答

相关问题