AMP邮件<style amp-custom>样式在Gmail桌面端不渲染求助

核心原因 #

你的AMP邮件在Playground校验通过但Gmail不渲染样式，是因为<style amp-custom>内存在无效CSS语法，加上开启了data-css-strict严格模式，Gmail会直接忽略整个自定义样式块。

具体错误点：

• #item1和#item2中存在background-color:;（未指定值的无效属性声明）
• .oddsnow1、.oddsnow2存在重复的CSS属性（虽不触发校验错误，但属于冗余代码）

修复后的完整代码 #

<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    body {
      background-color: #20252c;
    }
    
    .promo {
      margin: 1em;
      height: 40px;
      align-items: center;
      font-family: Helvetica;
      font-weight: bold;
      font-size: 1.5em;
      color: white;
      display: flex; /* 确保图标与文字垂直居中 */
    }
    
    .container {
      display: grid;
      grid-template-columns: 3fr 4fr 2fr 2fr;
      gap: 10px;
      grid-template-rows: repeat(4, 1fr);
      background-color: #2b3037;
      margin: 1em;
      border-radius: 2%;
      padding: 10px 0; /* 避免内容贴容器边缘 */
    }
    
    #item1, #item2 {
      grid-column: 1 / 3;
      color: white;
      font-family: Helvetica;
      margin-left: 15px;
    }
    
    #item1 {
      grid-row: 1;
    }
    
    #item2 {
      grid-row: 2;
    }
    
    .oddswas1, .oddswas2 {
      background-color: #20252c;
      border-radius: 5%;
      margin: 10px;
      text-align: center;
      color: #878e97;
      text-decoration: line-through;
      font-family: Helvetica;
      font-size: 1.4em;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .oddswas1 {
      grid-column: 3;
      grid-row: 1;
    }
    
    .oddswas2 {
      grid-column: 3;
      grid-row: 2;
    }
    
    .oddsnow1, .oddsnow2 {
      grid-column: 4;
      border-radius: 5%;
      margin: 10px;
      text-align: center;
      font-family: Helvetica;
      font-size: 1.4em;
      background-color: #154644;
      color: #46ebe3;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .oddsnow1 {
      grid-row: 1;
    }
    
    .oddsnow2 {
      grid-row: 2;
    }
  </style>
</head>
<body>
  <amp-img layout="responsive" src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/638a1d3bd5e92a0054b37948/original.png?1669995834" alt="Welcome" height="350" width="800"></amp-img>
  <div class="promo">
    <div>
      <amp-img src="https://www.midnite.com/_nuxt/img/boost-alt.af311e5.svg" height="30px" width="30px"></amp-img>
      <span> Boosts </span>
    </div>
  </div>
  
  <div class="container">
    <div id="item1">
      <h2> Norwich City / Norwich City </h2>
      <h3> Half-time/Full-time - Norwich City v Birmingham City | 19:45 </h3>
    </div>
    <div class="oddswas1">
      <h3> 8/5 </h3>
    </div>
    <button class="oddsnow1">
      <h3> 17/10 </h3>
    </button>
    
    <div id="item2">
      <h2> Swansea, Blackburn & Norwich All to Win </h2>
      <h3> Favourites Acca - Feb 21 Championship Enhanced Accas | 19:45 </h3>
    </div>
    <div class="oddswas2">
      <h3> 301/50 </h3>
    </div>
    <button class="oddsnow2">
      <h3> 27/4 </h3>
    </button>
  </div>
</body>
</html>

关键修复与优化 #

1. 移除了无效的background-color:;声明，恢复样式块的有效性
2. 合并重复选择器，精简冗余代码
3. 添加display: flex确保.promo内图标与文字垂直居中
4. 为网格项添加居中布局，优化文字显示效果
5. 给.container增加内边距，提升视觉体验

验证步骤 #

修复后重新在AMP Playground和Gmail AMP Playground校验，再通过amp@gmail.dev发送测试邮件，Gmail桌面端即可正常渲染样式。

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