Alt标签在邮件客户端不显示求助（Mailchimp测试场景）

这种情况我在调试邮件模板时遇到过好多次，明明在代码里加了Alt标签，Mailchimp发送后在客户端就是不显示，多半是写法不规范、样式冲突或者客户端兼容性的问题，给你几个具体的排查和解决步骤：

1. 确保Alt标签直接写在<img>标签上 #

这是最容易踩的坑！你提供的代码片段里没看到<img>元素，Alt标签必须直接添加在<img>标签的alt属性中，而不是父级的div、table或者td上。比如正确的写法应该是：

<img src="你的图片地址" alt="这里写清晰的替代文本，比如「粉色女童针织开衫」" />

如果是用Mailchimp可视化编辑器加的图片，记得在图片设置面板里填写Alt文本，再切换到代码模式确认alt属性是否存在——有时候编辑器会自动过滤不规范的属性。

2. 修复样式冲突导致的文本被隐藏 #

你的代码里给.item-wrap加了font-size:0;line-height:0;，这会直接导致子元素里的Alt文本因为字体大小为0而完全看不见！解决方法是给<img>标签单独设置字体相关样式，强制覆盖父级的样式：

<img src="..." alt="..." style="font-size:14px;line-height:1.2;display:block;border:0;" />

添加display:block还能避免邮件客户端默认给图片加的多余间距，同时确保Alt文本在图片被屏蔽时能正常占据显示空间。

3. 考虑邮件客户端的图片显示逻辑 #

很多主流客户端（比如Outlook、Gmail）默认会屏蔽外部图片，Alt标签的显示规则也有差异：

• Outlook系列：需要用户开启「自动下载信任发件人的图片」，或者手动点击「显示图片」才会显示Alt文本；部分旧版Outlook还需要配合title属性才能正常显示。
• Gmail：桌面端在图片被屏蔽时会显示Alt文本，但移动端可能只显示占位框，所以Alt文本要尽量简短清晰。

4. 避免特殊字符和空Alt文本 #

如果Alt文本是空的，或者包含未转义的特殊字符（比如引号、&符号），客户端可能会直接忽略显示。建议：

• 用有实际意义的文本，不要留空；
• 特殊字符用HTML实体代替，比如&换成&，双引号换成"。

修正后的代码示例 #

结合你的代码结构，修正后的完整片段大概是这样：

<div class="item-wrap" style="display:inline-block;font-size:0;line-height:0;letter-spacing:0;vertical-align:top;">
  <table class="item" width="196" align="left" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="product-img" align="center" valign="top" style="padding:0 5px 15px;">
        <a href="https://www.childrensalon...">
          <img src="你的产品图片URL" alt="蓝色女童纯棉连衣裙" style="font-size:14px;line-height:1.2;display:block;border:0;" width="186" height="auto" />
        </a>
      </td>
    </tr>
  </table>
</div>

最后建议用Mailchimp自带的邮件测试功能，发送到不同客户端（比如Outlook、Gmail、iPhone邮件）验证效果，这样能快速定位剩余的兼容性问题。

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