CSS HTML 格式的电子邮件根本不显示在 Gmail 中，但在其他邮件客户端中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7224195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML formatted email not showing up at all in Gmail but is in other mail clients
提问by joshholat
I'm currently sending html formatted emails from PHP's mail() function and checking them simply to make sure they are showing up as HTML (formatting aside, I'm well aware that the formatting will vary (probably drastically) from client to client). They are displaying as HTML in the Apple Mail client as well as on my iPhone. However, Gmail simply refuses to display it as HTML as all. And by that I don't mean it is formatted incorrectly, it just simply isn't using HTML it appears.
我目前正在从 PHP 的 mail() 函数发送 html 格式的电子邮件并检查它们以确保它们显示为 HTML（除了格式之外，我很清楚格式会因客户端而异（可能会发生很大变化）从客户端到客户端） . 它们在 Apple Mail 客户端和我的 iPhone 中显示为 HTML。但是，Gmail 只是拒绝将其显示为 HTML。我并不是说它的格式不正确，它只是没有使用它出现的 HTML。
The weird part is that an img from a tag is being loaded, but that's about it... is it that I'm mostly using divs for layout and that's too new for Gmail or something (vs tables)?
奇怪的是，来自标签的 img 正在加载，但仅此而已......是不是我主要使用 div 进行布局，而这对于 Gmail 或其他东西（与表格）来说太新了吗？
As far as CSS and what not goes, viewing the raw source shows the following:
至于 CSS 和什么不是，查看原始源显示以下内容：
<html><head><style>body { background-color: #F2F2F2; font-family: Arial; color: #5C5C5C; font-size: 11pt; } a { color: #46AAFF; text-decoration: none; } #container { width: 750px; margin-right: auto; margin-left: auto; } #header { float: right; padding: 3px; height: 30px; } #header a { color: #666666; margin-right: 10px; } #mainBody { padding: 20px; background-color: #FFF; border: 1px solid #DADADA; border-radius: 3px; } #imageArea { border-top: solid #E8E8E8 1px; margin: 15px; } #singleImageArea { width: 250px; padding: 15px; } #singleImageArea p { float: right; line-height: 30px; width: 130px; margin-top: 20px; } #footer { padding: 10px; color: gray; } #footer p { text-shadow: 0px 2px #FFF; font-size: 10pt; } #footer a { color: #ADADAD; float: right; padding-left: 20px; padding-right: 20px; } #footer img { width: 35px; height: 23px; padding: 10px; float: left; } </style></head><body><div id="container"><div id="header"><a href="http://appname.local/login/">Login</a></d
iv><div style="clear: both;"></div><div id="mainBody"><h1>Hi Josh Holat!</h1>You've sent a request to <strong>reset</strong> your appname password. Just click the link below <em>(or copy and paste it into your browser)</em> and follow the instructions to set a new password. The link will expire in one hour.<br/><br/><a href="http://appname.local/sb/reset-password/?r=2768af61698fcde9c04f9449351575d6bfe6d720">http://appname.local/sb/reset-password/?r=2768af61698fcde9c04f9449351575d6bfe6d720</a><br/><br/>If you feel this request was submitted in error, don't worry; you can safely ignore this e-mail and your password will not be changed.<br/><br/>Much Love,<br/>Us</div><!-- #mainBody --><div id="footer"><img src="http://appname.local/images/email/footer_sb.png" /><p>© 2011 appname, Inc. All Rights Reserved <a href="http://appname.local/sb/legal/">Legal</a><a href="http://appname.local/sb/contact/">Contact</a><a href="http://s
tagebloc.local/sb/developers/">Developers</a><a href="http://appname.local/sb/blog/">Blog</a></p></div><!-- #footer --></div><!-- #container --></body></html>
As well as:
也：
Delivered-To: [email protected]
Received: by 10.229.40.2 with SMTP id i2cs133298qce;
Sun, 28 Aug 2011 14:29:08 -0700 (PDT)
Received: by 10.42.152.199 with SMTP id j7mr4419937icw.417.1314566947950;
Sun, 28 Aug 2011 14:29:07 -0700 (PDT)
Return-Path: <[email protected]>
Received: from joshholat.local (arh2281.urh.uiuc.edu [130.126.70.193])
by mx.google.com with ESMTP id w3si6800550icz.109.2011.08.28.14.29.06;
Sun, 28 Aug 2011 14:29:06 -0700 (PDT)
Received-SPF: neutral (google.com: 130.126.70.193 is neither permitted nor denied by best guess record for domain of [email protected]) client-ip=130.126.70.193;
Authentication-Results: mx.google.com; spf=neutral (google.com: 130.126.70.193 is neither permitted nor denied by best guess record for domain of [email protected]) [email protected]
Received: by joshholat.local (Postfix, from userid 70)
id 775063662E01; Sun, 28 Aug 2011 16:29:06 -0500 (CDT)
To: Josh Holat <[email protected]>
Subject: Password Reset Request
X-PHP-Originating-Script: 501:Email.php
From: appname <[email protected]>
Content-type: text/html
Message-Id: <[email protected]>
Date: Sun, 28 Aug 2011 16:29:06 -0500 (CDT)
I'm confused as to why third party clients would show it fine but Gmail simply ignore it?
我很困惑为什么第三方客户端会显示它很好，但 Gmail 只是忽略它？
回答by Brombomb
I am updating my answer since it has quite a few views, and new tools are available. I am leaving my original answer for posterity.
我正在更新我的答案，因为它有很多视图，并且有新工具可用。我将我的原始答案留给后人。
Edit * 9/19/19
编辑 * 19 年 9 月 19 日
You can find CSS property support by email client here: https://www.caniemail.com/
您可以在此处通过电子邮件客户端找到 CSS 属性支持：https: //www.caniemail.com/
Original Answer:
原答案：
Gmail does not support the <style>tag. You need to use inline css for gmail to work correctly.
Gmail 不支持该<style>标签。您需要使用内联 css 才能让 gmail 正常工作。
Here's a reference list. http://www.campaignmonitor.com/css/
这是一个参考列表。 http://www.campaignmonitor.com/css/
回答by Hengjie
GMail doesn't support<style>tags and neither does a number of clients. To make your life easier, you can use convert to convert your style tags to inline CSS: https://templates.mailchimp.com/resources/inline-css/
GMail不支持<style>标签，许多客户端也不支持。为了让您的生活更轻松，您可以使用 convert 将您的样式标签转换为内联 CSS：https: //templates.mailchimp.com/resources/inline-css/
回答by Didhack
I see you're using an ID named #footer. It seems that Google doesn't recognize that name when dealing with mails. Notice that in the font code seen from gmail, all your ID might appear with "exc" + idName, except #footer. Try to use a different name.
我看到您正在使用名为 #footer 的 ID。Google 在处理邮件时似乎无法识别该名称。请注意，在从 gmail 看到的字体代码中，您的所有 ID 都可能以“exc”+ idName 显示，除了 #footer。尝试使用不同的名称。
回答by Abhishek Divekar
The above answers are pretty good, just wanted to add a few more points. All credits to this link:
上面的回答都不错，只是想补充几点。此链接的所有功劳：
Gmail only supports
<style>in the<head>.Gmail does support embedded styles (<style>). However, embedded styles are only supported in the head of your HTML document. The Gmail Android and iOS apps does not support<style>at all when rendering emails retrieved through non-Google accounts (GANGA).Gmail removes your entire
<style>block if it encounters an error.Gmail does not allow negative CSS margin values.
Gmail does not support attribute selectors and most pseudo-classes. e.g.
div[class="content"]{ color: red }. Gmail also does not support pseudo-classes like:checkedand:active.
Gmail中只支持
<style>在<head>。Gmail 确实支持嵌入样式 (<style>)。但是，仅 HTML 文档的头部支持嵌入样式。Gmail Android 和 iOS 应用程序<style>在呈现通过非 Google 帐户 (甘加) 检索的电子邮件时根本不支持。<style>如果Gmail遇到错误，它会删除您的整个阻止。Gmail 不允许负 CSS 边距值。
Gmail 不支持属性选择器和大多数伪类。例如
div[class="content"]{ color: red }。Gmail 也不支持像:checked和这样的伪类:active。
