Gmail中点击显示（tap to reveal）元素的回退内容与交互内容重复显示的问题求助

问题诊断 #

Gmail的邮件渲染引擎有特殊的处理逻辑，它会自动在邮件内容外层添加包含<u>标签的容器，但你的现有规则可能因为选择器优先级或结构匹配问题，没有正确隐藏交互内容（.content容器），导致回退内容和交互初始图片同时叠加显示。

看你原代码里的Gmail回退覆盖规则：

u~div .content { display: none !important; max-height: 0 !important; overflow: hidden !important; }

如果Gmail中.content元素不在u~div的直接匹配路径中，这个选择器就无法命中，从而导致.content容器未被隐藏，最终出现内容重复的问题。

解决方案 #

我们需要增强Gmail下的样式规则优先级，确保交互内容被彻底隐藏，同时保留回退内容的正常显示。以下是修改后的完整代码：

<style>
/* Fallback visible by default - 增强默认隐藏交互内容 */
.fallback { 
  display: block; 
  max-width: 500px; 
  margin: 0 auto; 
  height: 300px;
  visibility: visible !important;
}
.content, input[type="radio"] { 
  display: none !important; 
  mso-hide: all;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Gmail fallback override - 适配Gmail多层嵌套结构 */
u~div .content, u~div * .content { 
  display: none !important; 
  max-height: 0 !important; 
  overflow: hidden !important; 
  visibility: hidden !important;
}
u~div .fallback, u~div * .fallback { 
  display: block !important; 
  max-height: none !important; 
  visibility: visible !important;
}

/* WebKit-only interactivity */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .fallback { 
    display: none !important; 
    mso-hide: all !important;
    visibility: hidden !important;
  }
  .content { 
    display: block !important; 
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
  }
  input[type="radio"] { 
    display: inline-block !important; 
    visibility: visible !important;
  }
  .tap { 
    display: block !important; 
    mso-hide: all !important;
  }
  .reveal { display: none !important; }

  #tapreveal:checked~.content .reveal-1 { display: block !important; }
  #tapreveal2:checked~.content .reveal-2 { display: block !important; }

  /* 点击后隐藏初始触发图 */
  #tapreveal:checked~.content .tap { display: none !important; }
}

.content { 
  position: relative; 
  max-width: 500px; 
  margin: 0 auto; 
  height: 300px; 
  overflow: hidden;
}
.tap, .reveal { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  display: block; 
  z-index: 1;
}
.tap img, .reveal img { 
  width: 100%; 
  height: auto; 
  display: block; 
  max-width: 100%; 
  margin: 0;
}
</style>

<!-- Fallback Image (默认及Outlook显示) -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table width="500" cellpadding="0" cellspacing="0" border="0" class="fallback">
        <tr>
          <td>
            <a href="xx">
              <img src="xx" width="500" style="display:block; border:0; width:100%; max-width:500px; height:auto; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; color: #000000;" alt="xx">
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<!--[if !mso]><!-->
<!-- 仅WebKit生效的交互逻辑 -->
<input type="radio" name="tapreveal" id="tapreveal" style="display:none!important;">
<input type="radio" name="tapreveal" id="tapreveal2" style="display:none!important;">
<div class="content">
  <!-- 初始触发图 -->
  <label for="tapreveal" class="tap" style="cursor: pointer;">
    <img src="xx" alt="xx">
  </label>
  <!-- 点击后显示内容 -->
  <div class="reveal reveal-1" style="display: none;">
    <a href="xx" class="tap-2" style="display:block;">
      <img src="xx" alt="Final Offer Reveal">
    </a>
  </div>
</div>
<!--<![endif]-->

修改核心要点 #

1. 增强默认隐藏规则：给.content和单选框添加visibility: hidden !important和max-height: 0 !important，确保在非WebKit客户端（包括Gmail）下彻底隐藏，避免内容溢出。
2. 适配Gmail嵌套结构：将u~div .content扩展为u~div .content, u~div * .content，覆盖Gmail可能的多层嵌套容器，确保选择器能精准命中目标元素。
3. 恢复WebKit交互显示：在WebKit媒体查询中，给.content补充visibility: visible !important和max-height: none !important，确保交互内容能正常显示并响应点击。

修改后，Gmail会仅显示回退内容，WebKit客户端（如Apple Mail、iOS Mail）会正常加载交互功能，Outlook也能稳定显示回退图片。

内容来源于stack exchange