即使使用内联 CSS,HTML 也无法在 Gmail 中正确显示

问题描述 投票:0回答:2

我正在使用 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 中无效吗?从任一帐户发送 时,结果是相同的。根据我向哪个帐户发送消息,会出现差异。

html gmail html-email zoho thunderbird
2个回答
0
投票
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。


0
投票
有同样的问题:HTML 电子邮件未在 Gmail 中正确显示。

帮助我解决这个问题的两件事:

    使用内联 CSS - 不引用 URL。
  1. CSS 必须位于 .
就是这样!

© www.soinside.com 2019 - 2024. All rights reserved.