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

El *_*ldo 19 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>
Run Code Online (Sandbox Code Playgroud)

我看过Campaign Monitor但没有什么特别的指导我.

所有答案都赞赏.

kol*_*lin 21

我想这是因为outlook使用的是Microsoft文字渲染引擎,而不是HTML引擎,而hr标签只会像msword一样恢复为实线.

我可能会尝试使用全宽度表 - >单元格或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>
Run Code Online (Sandbox Code Playgroud)

NBSP是在那里的情况下,渲染引擎无法识别空单元格.

  • 将边框等设置为零后,这对我很有用.<table border ="0"width ="100%"cellpadding ="0"cellspacing ="0">谢谢! (3认同)
  • Everone抱怨电子邮件的html优雅,忽略了电子邮件编码与计算和数学思维无关; 它也往往变得相当丑陋. (2认同)

mar*_*2ch 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>
Run Code Online (Sandbox Code Playgroud)

宽度似乎需要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;">
Run Code Online (Sandbox Code Playgroud)