Node.js+Nodemailer实现的邮件确认布局在Gmail中显示异常问题求助

首先，问题的核心原因是Gmail的邮件渲染引擎对CSS Flexbox的支持非常有限——虽然现代浏览器完美支持flex，但包括Gmail在内的很多邮件客户端（尤其是网页版）对flex属性的解析存在兼容性问题，这直接导致了你的布局在Gmail中错乱。

邮件布局和网页布局的思路差异很大，邮件客户端的CSS支持远不如现代浏览器，所以传统的表格布局才是邮件开发的可靠方案。下面是针对你的需求的修改方案：

解决方案：用表格替代Flex布局 #

修改后的confirm.hbs模板代码 #

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email confirmation for https://myadobepics.ru</title>
  <style type="text/css">
    /* 补充邮件客户端兼容的全局样式 */
    body {
      margin: 0;
      padding: 0;
      width: 100% !important;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    table {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
    }
  </style>
</head>
<body style="margin: 0; padding: 0; width: 100%; background: linear-gradient(90deg, rgb(204, 232, 250) 0%, rgb(197, 235, 255) 50%);">
  <!-- 外层容器：实现页面垂直水平居中 -->
  <table width="100%" border="0" cellpadding="0" cellspacing="0" style="min-height: 100vh;">
    <tr>
      <td align="center" valign="middle" style="padding: 20px;">
        <!-- 主内容卡片 -->
        <table width="600" border="0" cellpadding="0" cellspacing="0" style="background-color: #FFF; border-radius: 16px; border: 10px solid black; padding: 20px; max-width: 100%;">
          <!-- Logo区域 -->
          <tr>
            <td align="center" style="padding-bottom: 15px;">
              <img src="cid:logo" width="240" style="width: 40%; max-width: 240px;" />
            </td>
          </tr>
          <!-- 分隔线 -->
          <tr>
            <td align="center" style="padding-bottom: 40px;">
              <hr style="width: 144px; margin: 0; color: #8CC9FF;" />
            </td>
          </tr>
          <!-- 欢迎文本 -->
          <tr>
            <td style="padding-bottom: 20px; font-size: 14px; color: black; line-height: 1.5; text-align: justify;">
              Hello, <b>{{nickname}}</b>! Thank you for your registration! Please, press a button below if you want to confirm it.
            </td>
          </tr>
          <!-- 确认按钮 -->
          <tr>
            <td align="center" style="padding-bottom: 20px;">
              <table border="0" cellpadding="0" cellspacing="0" style="background-color: lightskyblue; border-radius: 12px;">
                <tr>
                  <td align="center" style="padding: 12px 24px;">
                    <a href="https://myadobepics.ru:1122/verify?email={{email}}&nickname={{nickname}}&gen={{gen}}" style="text-decoration: none; color: white; font-size: 14px; font-weight: bold;">CONFIRM</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- 登录信息提示 -->
          <tr>
            <td style="padding-bottom: 15px; font-size: 14px; color: black; line-height: 1.5; text-align: justify;">
              To log in you can use the credentials we have provided next.
            </td>
          </tr>
          <!-- 登录账号信息 -->
          <tr>
            <td style="padding-bottom: 40px; font-size: 14px; color: black; line-height: 1.5;">
              <div><b>Your login: </b><span>{{email}}</span></div>
              <div style="margin-top: 5px;"><b>Your password: </b><span>{{password}}</span></div>
            </td>
          </tr>
          <!-- 签名区域 -->
          <tr>
            <td style="padding-bottom: 15px; font-size: 14px; color: black; line-height: 1.5;">
              <div>Best regards,</div>
              <div>Administrator</div>
              <div>E-mail: admin@myadobepics.ru</div>
            </td>
          </tr>
          <!-- 过期提示 -->
          <tr>
            <td align="center" style="font-size: 12px; color: maroon;">
              This link will be expired in 24 hours
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

关键修改说明 #

1. 替换Flex为表格布局：用<table>、<tr>、<td>实现所有布局逻辑，这是所有主流邮件客户端兼容性最好的方案。
2. 单位调整：把vw/vh替换为固定像素和百分比，避免视窗单位在邮件客户端的渲染差异。
3. 按钮实现：用嵌套表格制作按钮，确保在Gmail、Outlook等客户端中样式一致。
4. 添加兼容样式：在<style>标签中补充邮件开发常用的全局重置样式，减少不同客户端的默认样式差异。
5. 响应式适配：设置主内容表格的最大宽度为100%，确保在移动端设备上也能正常显示。

额外邮件开发最佳实践 #

• 优先使用内联样式：虽然Gmail现在支持部分<style>标签，但内联样式的兼容性最可靠。
• 避免复杂CSS选择器：邮件客户端对高级选择器（如后代选择器、伪类）支持有限。
• 测试多客户端显示：可以使用Mailtrap、Litmus等工具预览邮件在不同客户端的效果。
• 图片添加alt属性：确保图片加载失败时，用户能看到替代文本。

这样修改后，你的邮件布局应该能在Gmail和其他主流邮件客户端中正常显示了。

内容的提问来源于stack exchange，提问作者Kirill A.ZH.