添加<ul>标签后邮件模板文本消失，寻求HTML布局解决方案

问题原因 #

1. 无效HTML嵌套：<p>标签仅允许包含行内元素（如<span>、纯文本），不能嵌套<ul>这类块级元素。浏览器解析时会自动修正结构，把<ul>移出<p>外，导致<li>文本脱离了原本<span>上的字体样式（比如font-size:12px）。
2. 样式继承bug：上层<div>和<td>都设置了font-size:0，而<li>未单独指定字体大小，直接继承了这个0值，文本自然看不见。

解决办法 #

针对邮件模板的兼容性要求，给出两种可行方案：

方案1：修复结构+行内样式补全

重构HTML结构，移除无效嵌套，同时给列表标签单独设置行内样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Browser</title>
</head>
<body>
  <div class="b opaf v" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%">
    <table cellpadding=0 style="border:none;vertical-align:top;width:100%">
      <tr>
        <td align=left class=x style="font-size:0;word-break:break-word">
          <div style="text-align:left">
            <!-- 用div统一包裹，避免p嵌套块级元素 -->
            <div style="font-size:12px;font-family:Arial,sans-serif;font-weight:400;color:#54565b;line-height:14px">
              <span style="font-size:65%;vertical-align:4px;line-height:0">§</span>
              <!-- 给ul/li单独设置样式，覆盖上层font-size:0 -->
              <ul style="margin:0 0 0 16px;padding:0;list-style-type:none;">
                <li style="font-size:12px;line-height:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
              </ul>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

方案2：表格模拟列表（更兼容邮件客户端）

部分邮件客户端对<ul>/<li>支持不佳，用表格实现符号+文本的对齐效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Browser</title>
</head>
<body>
  <div class="b opaf v" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%">
    <table cellpadding=0 style="border:none;vertical-align:top;width:100%">
      <tr>
        <td align=left class=x style="font-size:0;word-break:break-word">
          <div style="text-align:left">
            <table cellpadding="0" cellspacing="0" style="font-size:12px;font-family:Arial,sans-serif;color:#54565b;">
              <tr>
                <!-- 第一列放符号 -->
                <td style="vertical-align:top;padding-right:8px;line-height:14px;">
                  <span style="font-size:65%;vertical-align:4px;line-height:0">§</span>
                </td>
                <!-- 第二列放文本，自动换行对齐 -->
                <td style="line-height:14px;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

邮件模板额外注意事项 #

• 所有样式尽量用行内样式，外部样式表在多数邮件客户端不生效；
• 避免复杂的块级元素嵌套，优先用表格布局保证兼容性；
• 自定义符号时，用<span>单独设置样式，避免影响文本排版。

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