Shopify邮件模板自定义CSS失效被用户代理样式表覆盖求助

核心问题：邮件客户端的CSS渲染限制 #

你遇到的问题本质是网页CSS和邮件CSS的渲染规则完全不同——大部分主流邮件客户端（Gmail、Outlook、Apple Mail等）对<style>标签中的类选择器支持极差，要么直接忽略，要么被自带的用户代理样式覆盖，这就是预览正常但实际收件箱失效的原因。

你可能踩的坑 #

• 沿用了网页开发的CSS写法：依赖<style>里的类选择器，这在邮件环境里几乎行不通。
• 没考虑应用的发送转换逻辑：有些Shopify邮件应用的预览环境基于网页渲染，但发送时不会自动把内部CSS转成内联样式，导致样式丢失。

解决步骤 #

1. 强制使用内联CSS
   把所有自定义样式直接写在HTML元素的style属性里，比如：

   <!-- 不要写这种类选择器 -->
   <style>.custom-box { padding: 15px; background: #f5f5f5; }</style>
   <div class="custom-box">内容</div>
   
   <!-- 改成内联样式 -->
   <div style="padding: 15px; background: #f5f5f5;">内容</div>
   

2. 启用应用的自动内联CSS功能
   检查你用的Shopify邮件应用设置，看看有没有“自动内联CSS”“样式转换”这类选项，开启后应用会帮你把<style>里的样式自动转成内联样式，减少手动工作量。

3. 用!important临时补救（仅作备选）
   如果暂时没法全改内联，可以在类选择器的属性后加!important提升优先级，但这只在部分客户端生效，不能作为最终解决方案：

   .custom-box { padding: 15px !important; background: #f5f5f5 !important; }
   

4. 用真实客户端测试
   别只依赖应用的预览，发送测试邮件到Gmail、Outlook等真实收件箱，因为预览环境的渲染规则和实际客户端差异很大。

5. 避开不兼容的CSS属性
   邮件里尽量只用基础CSS属性，比如font-size、color、padding、border、background-color，别用flex、grid这类现代布局属性，大部分邮件客户端不支持。

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