Gmail移动端邮件响应失效求助：布局与背景色适配异常

修复后完整代码 #

<style>
  @media only screen and (max-width: 480px) {
    [class="reclaim"] {
      background-color: #E7E4DE !important;
    }
    p {
      line-height: 1.5 !important;
      letter-spacing: -0.3px !important;
    }
    [class="stack"] {
      display: block !important;
      width: 100% !important;
      float: none !important;
      padding: 10px 20px !important;
    }
    [class="sg"] {
      font-size: 14px !important;
    }
    [class="stack-table"] {
      table-layout: auto !important;
      width: 100% !important;
    }
  }
</style>

<table class="reclaim" role="presentation" width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="max-width: 624px; font-family: Lato, sans-serif; background-color: #E5DED8; text-align: center;">
  <tr>
    <td style="padding-top: 20px;">
      <h2 style="margin: 0; color: #353535;">insert text here
      </h2>
    </td>
  </tr>
  <tr>
    <td style="margin: 10px 0px 10px; font-size: 14px; padding-right: 20px; padding-left: 20px; word-spacing: -1px; color: #353535;">
      <p>
        insert text here
      </p>      
    </td>
  </tr>
</table>

<table class="stack-table" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #f3f2ee; max-width: 624px; font-family: Lato, sans-serif; text-align: center; table-layout: fixed;" width="100%">
  <tr>
    <!-- First Image and Text -->
    <td class="stack" style="padding: 10px; vertical-align: top;" width="33.33%">
      <img src="image_link" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" width="180">
      <p class="sg" style="font-size: 13px; margin: 5px 0 0; color: #353535;">
        <strong>text</strong>
        <br>
        text
        <br>
        text
      </p>
    </td>
    <!-- Second Image and Text -->
    <td class="stack" style="padding: 10px; vertical-align: top;" width="33.33%">
      <img src="image_link" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" width="180">
      <p class="sg" style="font-size: 13px; margin: 5px 0 0; color: #353535;">
        <strong>text</strong>
        <br>
          text
        <br>
        text
      </p>
    </td>
    <!-- Third Image and Text -->
    <td class="stack" style="padding: 10px; vertical-align: top;" width="33.33%">
      <img src="image_link" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" width="180">
      <p class="sg" style="font-size: 13px; margin: 5px 0 0; color: #353535;">
        <strong>text</strong>
        <br>
        text
        <br>
        text
      </p>
    </td>
  </tr>
</table>

关键修改说明 #

• 属性选择器替代类选择器：Gmail移动端会过滤部分类选择器，改用[class="xxx"]的属性选择器能确保样式被正确识别
• 调整表格布局规则：给外层表格添加stack-table类，在媒体查询中把table-layout从fixed改为auto，让单元格能自适应100%宽度，实现纵向堆叠
• 补全单位：修复原代码中max-width: 624缺少px单位的问题，避免布局异常
• 增强媒体查询兼容性：添加only关键字，提升对Gmail等客户端的适配性
• 优化移动端内边距：给stack类增加左右内边距，让移动端内容更贴合屏幕

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