为 Gmail 设置 HTML 电子邮件样式
[英]Styling HTML email for Gmail
问题描述
I'm generating a html email that uses an internal stylesheet, ie
我正在生成一个使用内部样式表的 html 电子邮件，即
<!doctype html>
<html>
<head>
<style type="text/css">
h2.foo {color: red}
</style>
</head>
<body>
<h2 class="foo">Email content here</foo>
</body>
</html>
When viewed in Gmail it seems all the styles in the internal stylesheet are ignored.在 Gmail 中查看时，内部样式表中的所有样式似乎都被忽略了。 It seems Gmail ignores all styles other than inline rules, eg似乎 Gmail 忽略了除内联规则之外的所有样式，例如
<h2 style="color: red">Email content here</foo>
Is this my only option for styling HTML emails when viewed with Gmail?这是我在使用 Gmail 查看时设置 HTML 电子邮件样式的唯一选择吗？
8 个解决方案
解决方案1
62 2012-02-03 21:43:39
Use inline styles for everything. 对所有内容使用内联样式。 This site will convert your classes to inline styles: http://premailer.dialect.ca/ 该站点会将您的课程转换为嵌入式样式： http : //premailer.dialect.ca/
解决方案2
15 2016-09-30 19:05:09
The answers here are outdated, as of today Sep 30 2016. Gmail is currently rolling out support for the style tag in the head , as well as media queries. 截至2016年9月30日，此处的答案已过时。Gmail当前正在提供对head style标签以及媒体查询的支持。 If Gmail is your only concern, you're safe to use classes like a modern developer! 如果您只关心Gmail，那么可以像现代开发人员一样安全地使用类！
For reference, you can check the official gmail CSS docs . 作为参考，您可以查看gmail CSS官方文档 。
As a side note, Gmail was the only major client that didn't support style ( reference , until they update anyway). 顺带一提，Gmail是唯一不支持style主要客户端（请参考 ，直到他们无论如何都进行更新）。 That means you can almost safely stop putting styles inline. 这意味着您几乎可以安全地停止将样式插入行中。 Some of the more obscure clients may still need them. 一些比较模糊的客户可能仍需要它们。
解决方案3
11 2014-05-22 12:43:46
Gmail started basic support for style tags in the head area. Gmail从头开始对样式标签提供基本支持。 Found nothing official yet but you can easily try it yourself. 尚未找到任何官方文件，但您可以自己尝试。
It seems to ignore class and id selectors but basic element selectors work. 似乎忽略了类和id选择器，但基本元素选择器起作用了。
<!doctype html>
<html>
<head>
<style type="text/css">
p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}
</style>
</head>
<body>
<p>Email content here</p>
</body>
</html>
it will create a style tag in its own head area limited to the div containing the mail body 它将在自己的头部区域中创建一个样式标签，该标签仅限于包含邮件正文的div
<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
解决方案4
4 2017-12-21 17:31:58
I agree with everyone who supports classes AND inline styles. 我同意支持类和内联样式的所有人。 You might have learned this by now, but if there is a single mistake in your style sheet, Gmail will disregard it. 您可能现在已经了解了这一点，但是如果样式表中有一个错误，Gmail将忽略它。
You might think that your CSS is perfect, because you've done it so often, why would I have mistakes in my CSS? 您可能会认为您的CSS很完美，因为您经常这样做，为什么我的CSS会出错？ Run it through the CSS Validator (for example http://www.css-validator.org/ ) and see what happens. 通过CSS验证程序（例如http://www.css-validator.org/ ）运行它，然后看看会发生什么。 I did that after encountering some Gmail display issues, and to my surprise, several Microsoft Outlook specific style declarations showed up as mistakes. 遇到一些Gmail显示问题后，我这样做了，令我惊讶的是，一些Microsoft Outlook特定的样式声明显示为错误。
Which made sense to me, so I removed them from the style sheet and put them into a only for Microsoft code block, like so: 这对我来说很有意义，因此我将它们从样式表中删除，然后将它们放入only for Microsoft代码块中，如下所示：
<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
This is just a simple example, but, who know, it might come in handy some time. 这只是一个简单的示例，但是，谁知道，它可能会在一段时间内派上用场。
解决方案5
2 2015-03-22 22:59:55
As others have said, some email programs will not read the css styles. 正如其他人所说，某些电子邮件程序不会读取CSS样式。 If you already have a web email written up you can use the following tool from zurb to inline all of your styles: 如果您已经编写了网络电子邮件，则可以使用zurb中的以下工具来内联所有样式：
http://zurb.com/ink/inliner.php http://zurb.com/ink/inliner.php
This comes in extremely handy when using templates like those mentioned above from mailchimp, campaign monitor, etc. as they, as you have found, will not work in some email programs. 当使用诸如mailchimp，活动监视器等上面提到的模板时，这非常方便，因为您发现它们在某些电子邮件程序中不起作用。 This tool leaves your style section for the mail programs that will read it and puts all the styles inline to get more universal readability in the format that you wanted. 该工具将样式部分留给将要阅读它的邮件程序，并将所有样式内联，以所需的格式获得更通用的可读性。
解决方案6
2 2015-05-30 11:27:27
Note that services and tools for sending emails may be able to inline your CSS for you, allowing CSS in <style> tags to work in Gmail. 请注意，用于发送电子邮件的服务和工具可能能够为您内联CSS，从而允许<style>标记中的CSS在Gmail中工作。
For instance, if you're sending emails with MailChimp, your CSS from <style> tags will get inlined automatically by default. 例如，如果您要使用MailChimp发送电子邮件，则默认情况下，来自<style>标记的CSS将自动内联。 With Mandrill, you can enable this functionality (although it's disabled by default for performance reasons ) by checking the "Inline CSS Styles in HTML Emails" box in the "Sending Defaults" section of the Settings tab: 使用Mandrill，您可以通过选中“设置”标签的“发送默认值”部分中的“ HTML电子邮件中的内联CSS样式”框来启用此功能（尽管出于性能原因默认为禁用）：
解决方案7
0 2020-08-07 19:39:43
I had the same problem while designing a template in Mailjet.我在 Mailjet 中设计模板时遇到了同样的问题。 Solution of the problem was minified CSS code inside <style> tags.问题的解决方案是缩小<style>标签内的 CSS 代码。
解决方案8
0 2022-01-11 21:54:46
@shawn did give an example how to use a combination of styling in the head section together with inline styling. @shawn 确实给出了一个示例，如何将头部样式与内联样式结合使用。 Some email clients (Outlook, Gmail, etc.) have tricky things, these can be fixed with css in the head style.一些电子邮件客户端（Outlook、Gmail 等）有一些棘手的问题，这些可以用头部样式中的 css 来修复。
The extra table <table width="580"> is for Outlook to solve 'width' problems and also to center the layout.额外的表格<table width="580">是供 Outlook 解决“宽度”问题以及使布局居中的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html style="border:none;" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <base target=_blank href="http://"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="x-apple-disable-message-reformatting"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="format-detection" content="telephone=no"/> <title> </title> <link href="https://fonts.google.com/specimen/Open+Sans#standard-styles" rel="stylesheet" type="text/css"/> <style type="text/css"> .ReadMsgBody { width:100%;background-color:#eeeeee } .ExternalClass { width:100%;background-color:#eeeeee } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100% } a[x-apple-data-detectors] { color:inherit !important;text-decoration:none !important;font-size:inherit !important; font-family:inherit !important;font-weight:inherit !important;line-height:inherit !important } div[style*="margin: 16px 0"] { margin:0 !important } body { margin:0;padding:0;font-family:'Open Sans','Verdana',Geneva,sans-serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none } #outlook a { padding:0 } .yshortcuts a { border-bottom:none !important } table,td { mso-table-lspace:0pt;mso-table-rspace:0pt } table,tr,td { border-collapse:collapse } tbody { width: 100% } p,a,li,blockquote { mso-line-height-rule:exactly } li { mso-margin-top-alt:0;mso-margin-bottom-alt:0 } @media screen and (min-width: 600px) { table.container {width: 580px !important; margin: 10px auto !important } div.fullwidth { width: 580px !important } div.halfwidth { width: 290px !important } } </style> <!--[if gte mso 11]> <style type="text/css">table {border-spacing: 0;}table td {border-collapse: separate;}</style> <![endif]--> <!--[if !mso]><!--> <style type="text/css">table{border-spacing:0} table td{border-collapse:collapse}</style> <!--<![endif]--> <!--[if gte mso 15]> <xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml> <![endif]--> <!--[if gte mso 9]> <xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml> <![endif]--> </head> <body bgcolor="#ffffff" style="width:100%; margin:0px; padding:0px; border:0px; -webkit-text-size-adjust:100%"> <!-- BODY TABLE --> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:100%; border-collapse:collapse; border-spacing:0; margin:0 auto; padding:0; border:0; background-color:#ffffff"> <tr> <td width="100%" align="center" valign="top" style="padding:0px !important; border-collapse:collapse; border-spacing:0; border:0px; text-align:center; vertical-align:top; -webkit-text-size-adjust:100%;"> <!-- WRAPPER TABLE --> <!--[if (gte mso 9)|(IE)]> <table width="580" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td> <![endif]--> <table class="container" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; max-width: 580px; margin: 0 auto; background-color: #ffffff; border:1px solid #e7e7e7"> <tr> <td class="font0" align="center" style="padding: 0 !important; font: normal 0px/0px sans-serif !important; font-size: 0px !important; border-collapse: collapse; border-spacing: 0; border: 0; text-align: center; vertical-align: top;"> <!-- EACH CONTENT ROW AS BELOW --> <!--[if (gte mso 9)|(IE)]> <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td> <![endif]--> <div class="fullwidth" style="width: 290px; display: inline-block; vertical-align: top;"> <table width="100%" style="border-collapse: collapse; border-spacing: 0;"> <tr> <td style="padding: 20px 10px 0px 10px; font: normal 12px/16px sans-serif; color: #555454; text-align: left; -webkit-text-size-adjust: 100%;"> YOUR CONTENT HERE </td> </tr> </table> </div> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> <!-- END WRAPPER TABLE --> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> <!-- END BODY TABLE --> </td> </tr> </table> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.