24

我有一个问题,电子邮件客户端将我的样式恢复为<hr/>只有一条实线的样式。

以下是我的标记,在 Chrome 和 IE 中看起来不错,但 Outlook 总是将虚线还原为实线。

<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>

我看过 Campaign Monitor 但没有什么特别的东西可以指导我。

所有答案表示赞赏。

4

5 回答 5

28

我想这是因为 Outlook 使用 Microsoft 文字渲染引擎,而不是 HTML 引擎,并且 hr 标记只会恢复为 msword 中的实线。

我可能会尝试使用全宽 table->cell 或 div 和样式,而不是使用 hr 标签。

<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;">&nbsp;</td>
</tr>
</table>

nbsp在那里,以防渲染引擎无法识别空单元格。

于 2012-04-18T09:26:52.950 回答
18

根据其他答案,我发现这个效果最好:

<table border="0" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;">&nbsp;</td>
  </tr>
</table>
<br>

如果可能,宽度似乎需要以table% 或最好(根据https://www.campaignmonitor.com/resources/will-it-work/guidelines/)设置。pxtd

border-bottom速记似乎工作正常,其中科林回答中提到的速记版本在 Outlook 中没有

编辑:我发现以前使用过并且至少在 Outlook 中也有效(如果有能力的人可以在其他客户端测试它会很好),是一种<hr>基于方法。

<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
于 2015-03-18T09:31:03.670 回答
3

相当不雅,仅对已知的固定宽度有用,但我发现这些是您在尝试修复 html 电子邮件中的格式时遇到的恐惧。

<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
于 2012-04-19T07:57:29.763 回答
3

您可以使用此示例:

<div style="border-top: 1px dotted #999999;">&nbsp;</div>

不幸的是,它只能在白色背景下工作

于 2014-11-14T05:03:17.620 回答
0

需要声明一个字体大小,否则“”会与高度混淆。

 <tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px">&nbsp;</td></tr> 
于 2016-11-16T16:18:25.113 回答