PHP调用SendGrid发送HTML邮件样式与原文件不符该如何解决

核心原因 #

你的代码发送逻辑本身没有语法错误，HTML邮件样式失效通常和邮件客户端的兼容限制、模板读取异常有关，问题大概率出在以下几个点：

• 邮件客户端对CSS的支持度极低：Gmail、Outlook等主流邮件客户端都会直接过滤<head>标签内的<style>样式、外部CSS链接，仅支持标签行内的style属性样式。你本地浏览器预览正常是因为浏览器对CSS支持度高，放到邮件场景样式会被直接清空，最终只剩无样式的文本内容。
• file_get_contents读取远程HTML失败：如果网络波动、目标URL权限限制、服务器防火墙拦截，该函数会返回空或者false，导致传入的$html变量无效，最终仅能显示你设置的text/plain纯文本内容。
• HTML内容使用了邮件客户端不支持的特性：比如flex/grid布局、iframe、script标签、svg元素等，都会被邮件客户端过滤，导致页面结构错乱。

修复步骤 #

1. 改写HTML所有样式为行内样式
   不要使用<style>标签或外部CSS文件，所有样式直接写到对应标签的style属性中，示例如下：

<!-- 不要用这种写法 -->
<style>
  .title {
    color: #2c3e50;
    font-size: 24px;
  }
</style>
<h1 class="title">找回密码</h1>

<!-- 改成这种行内样式写法 -->
<h1 style="color: #2c3e50;font-size: 24px;margin:0;padding:10px 0;">找回密码</h1>

如果HTML内容较多，可以离线使用CSS行内转换工具处理后再保存为邮件模板文件。

2. 增加HTML读取校验逻辑，优先使用本地模板文件
   避免通过远程URL读取模板，改用本地绝对路径读取，同时增加错误判断确保模板内容读取成功：

// 优先读本地文件，避免远程请求失败
$html_path = __DIR__ . '/pwd.html';
$html = file_get_contents($html_path);
if ($html === false || trim($html) == '') {
    throw new \Exception('邮件模板读取失败');
}

3. 优化HTML兼容性
   邮件场景优先使用table做布局，不要使用div+flex/grid的布局方式，避免使用任何动态标签、特殊元素，确保所有图片资源都用绝对路径的公网可访问链接。

4. 调整SendGrid发送配置
   可以用SendGrid提供的setHtmlBody方法直接设置HTML内容，避免内容类型识别错误：

$email = new \SendGrid\Mail\Mail(); 
$email->setFrom("email@xxxx.com", "XXX Support");
$email->setSubject("XXXX.com - Password recovery for XXXXX");
$email->addTo("email@gmail.com", "Tester");
$email->addContent("text/plain", "Password recovery for XXXX");
// 替换原来的addContent设置html的方式
$email->setHtmlBody($html);

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