HTML邮件插入列表、div或blockquote后尾部排版混乱问题咨询

问题核心原因 #

你违反了HTML的标签嵌套规范，将块级元素<ul>嵌套在了<p>标签内部。
HTML规范明确规定，<p>属于段落标签，仅允许包含文本、图片、链接、<span>这类行内元素，不允许嵌套<ul>、<div>、<blockquote>这类块级元素。浏览器解析到不符合规范的嵌套时，会自动在块级元素开头的位置提前闭合前面的<p>标签，这就导致你写在<ul>后面的「Best, Magenta & Co」这段内容，直接脱离了原本你设置了字体、行高、边距等样式的<p>标签，自然就会出现排版混乱的问题。
你检查代码时觉得所有标签都正确闭合、对齐无误，是因为这个自动闭合是浏览器解析时的行为，你写的原始代码里的</p>闭合标签位置，最终对应的是浏览器自动生成的多余空段落标签，所以肉眼很难排查到问题。你哪怕只放了空的<ul>标签，也会触发这个自动闭合逻辑，完全符合你遇到的「只要有列表就出问题，删除列表就恢复正常」的现象。

修复方案 #

把<ul>元素移到<p>标签外面即可，调整后的代码参考：

<div style="max-width: 600px !important; padding: 20px; background-color: #FFFFFF">
  <p style="color: #191C22;font-family: Arial, sans-serif;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-size: 16px;line-height: 150%;text-align: left; width: 100%;">
    Hi!&nbsp;<br>
    <br>
    Thanks for starting your application!<br><br>
    Give us a call at our number or you can email us with questions.
    <br><br>
    Thanks for your business!<br>
    <br>
  </p>
  <ul></ul>
  <p style="color: #191C22;font-family: Arial, sans-serif;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-size: 16px;line-height: 150%;text-align: left; width: 100%;">
    Best,<br>
    Magenta & Co
  </p>
</div>

如果你的<ul>后续要填充列表内容，直接在对应位置加<li>即可，不会再影响尾部的签名排版。

额外建议 #

做HTML邮件模板时尽量遵循保守的标签嵌套规则，尽量不要在块级元素内跨类型嵌套，能避免绝大多数邮箱客户端的兼容问题。

内容的提问来源于stack exchange，提问作者AndyB