在 Gmail 中不呈现 CSS 样式

问题描述 投票：0回答：0

我正在尝试发送带有一些 CSS 样式的相当简单的 HTML 电子邮件。 CSS 样式在 Apple Mail 和 Outlook 中运行良好，但在网页版 Gmail 中则完全不行。 HTML 显然在那里，只是没有 CSS。我很好奇是否有人知道为什么会这样。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Department of Military and Veterans Affairs</title>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <style>

* {
  padding: 0;
  margin: 0;
}

p, span, h1, h2, h3 {
  font-family: "Montserrat", "Gotham", "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}

h1 {
  font-size: 24px;
  padding: 5px 0;
}

h2 {
  font-size: 20px;
  padding-bottom: 2px;
}

h3 {
  font-size: 12px;
  padding-bottom: 5px;
}

p {
  font-size: 16px;
}

#top-bar-image {
  display:inline-block;
}

#top-bar-text {
  display: inline-block;
  vertical-align:top;
  height: 40px;
}

#agency-logo {
  height: 40px;
  width: 40px;
}

#agency-title {
  color: #003146;
  vertical-align: middle;
  line-height: 40px;
  font-size: 1rem;
}

#banner {
  background-image: url("https://www.dmva.pa.gov/banners/flag_banner.jpg?width=1600&height=340");
  background-position: center;
  background-size: 100% 200%;
  height: 50px;
}

#content {
  display: table;
}

#first-row {
  display: table-row;
  vertical-align: top;
}

#spotlight {
  display: table-cell;
  background-color: #ffffff;
  padding:15px;
  vertical-align: middle;
}

.spotlight-image {
  display: block;
  margin:auto;
  width: 40%;
  padding: 5px;
}

.spotlight-text {
  text-align:center;
  color: #464646;
}

.spotlight-title {
  text-align: center;
  color: #2a578d;
}

#opportunities {
  display: table-cell;
  background-color: #224671;
  padding: 15px;
  vertical-align: middle;
}

.opportunity {
  padding: 5px;
}

.opportunity-title {
  color: #b8b7b4;
}

.opportunity-date {
  color: #fafafa;
}

.opportunity-text {
  color: #fafafa;
}

#projects {
  background-color: #ebebeb;
  vertical-align: top;
  padding: 15px;
}

.project {
  background-color: #ebebeb;
  padding: 5px;
}

.project-title {
  color: #2a578d;
}

.project-text {
  color: #000000;
}

@media only screen and (max-width: 700px) {
  #content, #first-row, #spotlight, #opportunities {
    display: block;
  }
}
    </style>
  </head>
  <body>
    <div id="top-bar">
      <div id="top-bar-image">
        <img id="agency-logo" src="https://www.dmva.pa.gov/PublishingImages/DMVA_Keystone-01.svg" alt="Department of Military and Veterans Affairs Logo">
      </div>
      <div id="top-bar-text">
        <span id="agency-title">Department of Military and Veterans Affairs</span>
      </div>
    </div>
    <div id="banner"></div>
    <div id="content">
      <div id="first-row">
        <div id="spotlight">
          <div class="spotlight-image-div">
            <img class="spotlight-image" src="https://petapixel.com/assets/uploads/2019/09/USMC-Col.-Carl-Cooper.jpeg" alt="Volunteer spotlight image">
          </div>
          <h1 class="spotlight-title">Volunteer Spotlight</h1>
          <p class="spotlight-text">Eaque nemo harum dolor ipsam. Saepe suscipit ratione nihil quibusdam repellat quia id. Eum est modi ut amet laboriosam eum omnis. In aliquam consequatur dolorem doloribus aut dolor. Iusto nisi distinctio architecto et ut et facilis.</p>
        </div>
        <div id="opportunities">
          <div class="opportunity">
            <h2 class="opportunity-title">Opportunity 1</h2>
            <h3 class="opportunity-date"> January 1st, 1970</h3>
            <p class="opportunity-text">Ut labore aut sint natus ut numquam dignissimos. Sit assumenda molestiae sed fugiat eligendi ut tempore ut. Magni voluptate eum et vitae quia quam cum ut. Sit iusto aliquid quos. Ipsa quia magni ducimus veniam officia reprehenderit. Explicabo dolorum praesentium possimus explicabo excepturi nemo ex autem. Occaecati blanditiis ab totam. At soluta unde neque. Libero ipsa ab earum in alias. Facere nesciunt dolor numquam voluptate.</p>
          </div>
          <div class="opportunity">
            <h2 class="opportunity-title">Opportunity 2</h2>
            <h3 class="opportunity-date"> January 1st, 1970</h3>
            <p class="opportunity-text">Ea consequatur quos eligendi. Voluptatem aut dolorum vel delectus deserunt. Iure voluptatem ratione officia cupiditate. Debitis ex rerum deserunt odio magnam assumenda. Ipsam eligendi quia iure. Voluptatem voluptatem neque aut ipsa. Earum soluta maiores iusto quas error reprehenderit est. Velit velit saepe nobis minima officia. Amet quia quam nihil. Cumque excepturi saepe est consequuntur fugiat facilis et est. Voluptatum dolores quos quod perferendis laborum officiis. Nesciunt rerum assumenda reiciendis doloribus quam labore.</p>
          </div>
          <div class="opportunity">
            <h2 class="opportunity-title">Opportunity 3</h2>
            <h3 class="opportunity-date"> January 1st, 1970</h3>
            <p class="opportunity-text">Quisquam aperiam quo placeat qui odit. Praesentium est quia nulla non tempore eum odit occaecati. Beatae distinctio voluptas maiores. Ea omnis omnis eos. Est facilis neque consectetur libero necessitatibus voluptatem. Suscipit est ea laboriosam sunt fugiat repellat facilis. Omnis molestias voluptas amet quis et et. Sed blanditiis consequatur esse voluptas iusto. Dolores eum eveniet adipisci. Veritatis unde hic molestias adipisci.</p>
          </div> 
        </div>
      </div>
    </div>
    <div id="projects">
      <div class="project">
        <h2 class="project-title">Project Recap 1</h2>
        <p class="project-text">Nemo explicabo earum eos voluptates. Suscipit et deleniti maiores similique voluptatem et. Reiciendis ex quis rem nemo quo. Excepturi dignissimos quidem explicabo impedit ullam magni.

Ea qui quia tenetur odit id adipisci. At consequuntur quo sit pariatur quisquam ullam aliquid. Aliquid recusandae laudantium voluptatum labore excepturi odit commodi. Illo officia odio voluptatum optio error ea quod nostrum. Nemo harum voluptatem cum tempore. Non velit nemo iste dolor rerum praesentium enim.</p>
      </div>
      <div class="project">
        <h2 class="project-title">Project Recap 2</h2>
        <p class="project-text">Cum deserunt molestiae voluptate facilis et deleniti similique. Qui necessitatibus voluptas provident fugit velit cumque. Ea odio aspernatur eum reprehenderit ut ullam. Esse id ex ut ea. Pariatur repudiandae non aut molestias tenetur dolore. Optio optio reiciendis saepe sunt ut.

Possimus rem voluptates perspiciatis porro rerum ullam ratione minima. Magnam voluptas aut ut iste. Aut ut quia voluptatem et natus eum voluptates in. Non dolor omnis totam quod in iste. Expedita sed doloribus nihil iusto inventore et. Dolorum magnam quasi hic beatae placeat velit.</p>
      </div>
    </div>
  </body>
</html>

要让 CSS 在 Gmail for web 中工作，我唯一能做的就是通过 Litmus PutsMail 发送模板。它运行良好，但我不知道 PutsMail 发生了什么变化，我不想使用外部电子邮件客户端。

据我所知，所有 CSS 都与 Gmail 兼容。我不确定链接的字体是否兼容。尽管如此，当我删除链接的字体标签并从 CSS 中删除除 Helvetica 和 sans-serif 之外的所有字体时，CSS 无法在 Gmail 中呈现。

为了发送电子邮件，我一直在使用 Mozilla Thunderbird、具有检查元素技巧的网络版 Outlook 和具有相同检查元素技巧的网络版 Gmail。

如果有任何想法或建议，我将不胜感激。

编辑： 事实证明，我根本无法在 Gmail 中使用样式块。我试图通过电子邮件发送下面的代码。在 Firefox 和 Safari（我不使用 Chrome）上的网络版 Gmail 中，文本是黑色的。该颜色在 Outlook for web 和 Apple Mail for Macbook and iPhone 中显示良好。我一直在使用 Mozilla Thunderbird 从 Outlook 组织帐户向我的个人 Gmail 帐户发送邮件。内联样式似乎确实有效，但我宁愿不使用，而且我不确定如何将 @media 与内联样式一起使用。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <style>
                p {
                    color: #00ff00;
                }
            </style>
        </head>
        <body>
            <p>This is text.</p>
    </body>
    </html>
html css html-email
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.