Python发送的邮件CSS无法正常渲染？求解决方法

问题背景 #

使用smtplib发送HTML邮件时，自行编写的HTML/CSS在浏览器中能正常渲染，但在Gmail里样式完全失效，他人的代码却可正常显示。

用到的Python代码 #

import smtplib
from email.message import EmailMessage

smtp_server = smtplib.SMTP("smtp.gmail.com", 587)
smtp_server.starttls()
smtp_server.login(email, password)

message = EmailMessage()
message["From"] = email
message["To"] = recipient
message["Subject"] = "Test"
with open("test.html", "r") as file:
    text = file.read()

message.set_content(text, subtype="html")

smtp_server.send_message(message)
smtp_server.quit()

自定义HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style type="text/css">
.email-confirmation {
  background-color: #fff;
  display: flex;
  max-width: 480px;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  color: #000;
  margin: 0 auto;
  padding: 91px 69px 330px;
  font: 15px Inter, sans-serif;
}

.logo {
  aspect-ratio: 7.81;
  object-fit: contain;
  object-position: center;
  width: 179px;
  align-self: center;
  max-width: 100%;
}

.confirmation-title {
  font-size: 20px;
  font-weight: 600;
  align-self: start;
  margin-top: 51px;
}

.confirmation-message {
  font-weight: 300;
  margin-top: 24px;
}

.confirmation-code {
  text-align: center;
  border-radius: 30px;
  background-color: #000;
  align-self: center;
  margin-top: 55px;
  width: 215px;
  max-width: 100%;
  font-size: 35px;
  color: #fff;
  font-weight: 700;
  padding: 7px 35px;
}

.signature {
  font-weight: 500;
  align-self: start;
  margin-top: 40px;
}
</style>

<section class="email-confirmation">
  <img loading="lazy" src="url">
  <h1 class="confirmation-title">Подтверждение почты</h1>
  <p class="confirmation-message">
    Это письмо отправлено, чтобы <br />
    подтвердить электронную почту. <br />
    <br />
    Если это были не Вы, проигнорируйте данное письмо. <br />
    <br />
    Для завершения подтверждения - <br />
    вернитесь к боту и введите этот код.
  </p>
  <div class="confirmation-code" tabindex="0" role="textbox" aria-label="Confirmation code">173 586</div>
  <p class="signature">С уважением, команда Bard!</p>
</section>
</body>
</html>

解决方案 #

Gmail对HTML邮件的CSS支持有严格限制，问题出在样式写法上，按以下几点修改即可：

• 改用内联样式：Gmail会过滤<style>标签内的大部分样式，必须把样式直接写在HTML元素的style属性中。比如将.email-confirmation的样式直接写到<section>标签里。
• 移除不兼容属性：
  • 删掉aspect-ratio，改用固定宽高或padding模拟比例
  • align-self在Gmail中支持有限，改用margin或text-align控制元素位置
  • loading="lazy"在邮件客户端无效，直接移除
• 添加字体降级方案：Inter字体并非所有客户端都支持，补充系统默认字体作为 fallback，比如font: 15px Inter, Arial, sans-serif;
• 优先用表格布局：flex布局在部分旧邮件客户端兼容性差，复杂布局建议用<table>实现，这是邮件开发的通用兼容方案
• 使用图片绝对URL：确保图片链接是完整的绝对路径，不能用相对路径

修改后的HTML示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section style="background-color: #fff; max-width: 480px; width: 100%; overflow: hidden; color: #000; margin: 0 auto; padding: 91px 69px 330px; font: 15px Inter, Arial, sans-serif;">
  <img src="url" style="width: 179px; max-width: 100%; display: block; margin: 0 auto;">
  <h1 style="font-size: 20px; font-weight: 600; margin-top: 51px;">Подтверждение почты</h1>
  <p style="font-weight: 300; margin-top: 24px;">
    Это письмо отправлено, чтобы <br />
    подтвердить электронную почту. <br />
    <br />
    Если это были не Вы, проигнорируйте данное письмо. <br />
    <br />
    Для завершения подтверждения - <br />
    вернитесь к боту и введите этот код.
  </p>
  <div style="text-align: center; border-radius: 30px; background-color: #000; margin: 55px auto 0; width: 215px; max-width: 100%; font-size: 35px; color: #fff; font-weight: 700; padding: 7px 35px;">173 586</div>
  <p style="font-weight: 500; margin-top: 40px;">С уважением, команда Bard!</p>
</section>
</body>
</html>

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