Html 电子邮件 <hr/> 样式问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10206252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html emails <hr/> styling issue
提问by El Toro Bauldo
I have a problem with e-mail clients reverting my styled <hr/>to one with just a solid line.
我有一个问题，电子邮件客户端将我的样式恢复为<hr/>只有一条实线的样式。
The following is my mark-up, looks fine in Chrome and IE but Outlook always reverts the dotted line to a solid one.
以下是我的标记，在 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>
I have looked at Campaign Monitor but nothing particular to guide me there.
我看过 Campaign Monitor，但没有什么特别的东西可以指导我。
All answers appreciated.
所有答案都表示赞赏。
回答by kolin
I would imagine it's because outlook uses the Microsoft word rendering engine, rather than a HTML engine, and a hr tag would just get reverted to a solid line as in msword.
我想这是因为 Outlook 使用 Microsoft Word 渲染引擎，而不是 HTML 引擎，并且 hr 标签会像 msword 一样恢复为实线。
I'd probably try using a full width table->cell or div and style that instead of using an hr tag.
我可能会尝试使用全宽 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;"> </td>
</tr>
</table>
nbspis in there in case the rendering engine doesn't recognise empty cells.
nbsp在那里，以防渲染引擎无法识别空单元格。
回答by marc82ch
Based on the other answers, I found this to work best:
根据其他答案，我发现这最有效：
<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;"> </td>
</tr>
</table>
<br>The width seems to be needed on tablein % or preferrably (as per https://www.campaignmonitor.com/resources/will-it-work/guidelines/) set it in pxon the tdif possible.
如果可能的话，宽度似乎需要table以 % 或最好（根据https://www.campaignmonitor.com/resources/will-it-work/guidelines/）设置。pxtd
The border-bottomshorthand seems to work fine, where the longhandversions as mentioned in kolin's answer don't in Outlook.
该border-bottom速记似乎做工精细，其中手写歌林的答复中提到的版本为Outlook没有。
EDIT: What I found to have used previously and also works, at least in Outlook (would be nice if anyone who can, could test that in other clients), is a <hr>based approach.
编辑：我发现以前使用过并且至少在 Outlook 中也有效（如果有人可以，可以在其他客户端中测试它会很好），是一种<hr>基于方法的方法。
<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
回答by El Toro Bauldo
Rather inelegant and only useful for a known fixed width but I'm finding that these are the terrors visited upon you when trying to fix formatting in html emails'.
相当不优雅，仅对已知的固定宽度有用，但我发现这些是尝试修复 html 电子邮件中的格式时对您造成的恐惧。
<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
回答by CodeGems
You can use this example:
你可以使用这个例子：
<div style="border-top: 1px dotted #999999;"> </div>
It will only work against white background unfortunately
不幸的是，它只能在白色背景下工作
回答by Brian Miller
Need to declare a font-size, otherwise " " messes with the height.
需要声明一个字体大小，否则" " 会弄乱高度。
<tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px"> </td></tr>
