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

【问题标题】：Html emails <hr/> styling issueHtml 电子邮件 <hr/> 样式问题
【发布时间】：2012-04-29 16:18:13
【问题描述】：

我在电子邮件客户端将我的样式 <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，但没有什么特别的东西可以指导我。

感谢所有答案。

【问题讨论】：

我重新标记了 Outlook，但它是 Outlook 的特定版本吗？ 2007 年以后，也许？
确实是所有电子邮件客户端，但我正在查看的是 2003 年和 2007 年。
对于网站来说，Outlook 是否比 IE 更邪恶？ OUTLOOK 2013 是不是比所有以前的版本都差？！！！

标签： html email outlook styles

【解决方案1】：

我想这是因为 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>

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

【讨论】：

我也意识到这可能不是最优雅的编码方式。
感谢科林，但它确实有效。我曾尝试过同样的技术，但效果有限。我在下面添加了解决方案，用您自己的话来说，它相当不雅
除非您想要 Outlook/Word 使用的默认颜色和边距，否则不要使用 hr 标签。
每个人都在抱怨电子邮件的 html 优雅，但都忽略了电子邮件编码与计算或数学思维无关的观点。它也往往变得相当丑陋。
在将边框等设置为零后，这对我很有用。谢谢！

【解决方案2】：

根据其他答案，我发现这个效果最好：

<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/）将其设置在 td 上的 px 中（如果可能）。

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

【讨论】：

方法也适用于 GMail 网络客户端以及 2020 年最新的 Outlook 桌面客户端（现在不确定版本号）。

【解决方案3】：

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

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

【讨论】：

我不敢相信我必须使用这样的东西才能在 Outlook 中获得虚线边框 sigh
p 标签在所有电子邮件客户端中都不容易控制，其中一些（outlook.com）不识别 p 标签上的边距/填充，所以我不建议使用这个解决方案。
哈哈哈这让我笑出声来。好一个。我会给它+1

【解决方案4】：

你可以使用这个例子：

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

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

【讨论】：

@dude 这个问题是关于 Outlook 电子邮件 HTML 解析而不是移动浏览器。

【解决方案5】：

需要声明一个font-size，否则“ ”会混淆高度。

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

【讨论】：