Html电子邮件<hr />样式问题

时间:2012-04-18 09:09:12

标签: html email outlook styles

我遇到电子邮件客户端的问题,我将样式化的<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,但没有什么特别的指导我。

所有答案都表示赞赏。

5 个答案:

答案 0 :(得分:19)

我认为这是因为outlook使用的是Microsoft字词渲染引擎,而不是HTML引擎,而hr标记只会像msword一样恢复为实线。

我可能会尝试使用全宽度表 - &gt;单元格或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 就在那里。

答案 1 :(得分:12)

基于其他答案,我发现这是最好的:

<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简写似乎工作得很好,其中kolin答案中提到的 longhand 版本不在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;">

答案 2 :(得分:3)

您可以使用此示例:

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

不幸的是,它只适用于白色背景

答案 3 :(得分:2)

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

<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>

答案 4 :(得分: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>