我正在使用 Thunderbird 向自己发送 HTML 电子邮件。作为测试，我已通过 Gmail 和 Zoho Mail 帐户尝试过此操作。结果是 Gmail 无法正确显示邮件。相反，它唯一与 HTML 代码相对应的事情就是使标题比普通文本大，仅此而已。另一方面，Zoho mail 显示一切正常，除了背景颜色之外，但这是另一个问题。
这是我的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Concert Invitation</title>
</head>
<body style="font-family:Arial, sans-serif; font-size:16px; line-height:1.5; color:#333; background-color:#f5f5f5; margin:0; padding:0" bgcolor="#f5f5f5">
<div class="container" style="max-width:600px; margin:0 auto; padding:20px; background-color:#fff" bgcolor="#ffffff">
<div class="header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px">
<img class="logo" src="logo.png" alt="Logo" style="max-width:150px">
<h1 class="title" style="font-size:24px; font-weight:bold; margin:0">Concert Invitation</h1>
</div>
<img class="picture" src="concert.jpg" alt="Concert" style="max-width:100%; margin-bottom:20px">
<p>Dear [Name],</p>
<p>You are cordially invited to our upcoming concert on [Date] at [Time]. The concert will be held at [Venue] and will feature performances by [Artists].</p>
<p>Please RSVP by [RSVP Date] to reserve your seat. We look forward to seeing you there!</p>
<div class="address" style="margin-top:40px; padding-top:20px; border-top:1px solid #ccc">
<p style="margin:0">123 Main Street</p>
<p style="margin:0">Anytown, USA 12345</p>
<p style="margin:0">(123) 456-7890</p>
<p style="margin:0">[email protected]</p>
</div>
</div>
</body>
</html>
有人知道为什么这在 Zoho Mail 中有效，但在 Gmail 中无效吗？从任一帐户发送 时，结果是相同的。根据我向哪个帐户发送消息至，会出现差异。
justify-content:space-between;
和
align-items:center;。因此，您在 Gmail 中看到的是没有这些属性的代码。好消息是您应该能够获得相同的布局，而无需求助于这些属性。您可以在
margin:auto
和
<img class="logo">上设置
<h1 class="title">，然后在前者上设置
margin-left:0;将其左对齐，在后者上设置
margin-right:0;将其右对齐。
<div class="header" style="display:flex; margin-bottom:20px">
<img class="logo" src="logo.png" alt="Logo" style="margin:auto; margin-left:0; max-width:150px">
<h1 class="title" style="font-size:24px; font-weight:bold; margin:auto; margin-right:0;">Concert Invitation</h1>
</div>
但请注意，并非每个电子邮件客户端都支持 display:flex
（请参阅https://www.caniemail.com/features/css-display-flex/）。例如，如果您需要在 Windows 版 The Outlooks 中获得准确的布局，则需要使用
<table>s。
帮助我解决这个问题的两件事：