样式化 HTML 电子邮件的最佳实践
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4829254/
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
Best practices for styling HTML emails
提问by Joe Mornin
I'm designing an HTML template for an email newsletter. I've learned that many email clients ignore linked stylesheets, and many others (including Gmail) ignore CSS block declarations altogether. Are inline style attributes my only choice? What are the best practices for styling HTML emails?
我正在为电子邮件通讯设计 HTML 模板。我了解到许多电子邮件客户端忽略链接的样式表，而许多其他客户端（包括 Gmail）完全忽略 CSS 块声明。内联样式属性是我唯一的选择吗？设置 HTML 电子邮件样式的最佳做法是什么？
采纳答案by Jim
Campaign Monitor have an excellent support matrixdetailing what's supported and what isn't among various mail clients.
Campaign Monitor 有一个出色的支持矩阵，详细说明了各种邮件客户端中支持的内容和不支持的内容。
You can use a service like Litmusto view how an email appears across several clients and whether they get caught by filters, etc.
您可以使用Litmus 之类的服务来查看电子邮件在多个客户端中的显示方式以及它们是否被过滤器捕获等。
回答by Michael Irigoyen
I've fought the HTML email battle before. Here are some of my tips about styling for maximum compatibility between email clients.
我以前打过 HTML 电子邮件之战。以下是我关于在电子邮件客户端之间实现最大兼容性的样式的一些技巧。
Inline stylesare you best friend. Absolutely don't link style sheets and do not use a
<style>tag (GMail, for example, strips that tag and all it's contents).Against your better judgement, use and abuse tables.
<div>s just won't cut it (especially in Outlook).Don't use background images, they're spotty and will annoy you.
Remember that some email clients will automatically transform typed out hyperlinks into links (if you don't anchor
<a>them yourself). This can sometimes achieve negative effects (say if you're putting a style on each of the hyperlinks to appear a different color).Be careful hyperlinking an actual link with something different. For example, don't type out
http://www.google.comand then link it tohttps://gmail.com/. Some clients will flag the message as Spam or Junk.Save your images in as few colors as possibleto save on size.
If possible, embed your imagesin your email. The email won't have to reach out to an external web server to download them and they won't appear as attachments to the email.
内联样式是你最好的朋友。绝对不要链接样式表，也不要使用
<style>标签（例如，GMail 会删除该标签及其所有内容）。反对你更好的判断，使用和滥用表。
<div>s 只是不会削减它（尤其是在 Outlook 中）。不要使用背景图片，它们是参差不齐的，会惹恼你。
请记住，某些电子邮件客户端会自动将输入的超链接转换为链接（如果您不
<a>自己锚定它们）。这有时会产生负面影响（例如，如果您在每个超链接上设置样式以显示不同的颜色）。小心地将实际链接与不同的内容进行超链接。例如，不要输入
http://www.google.com然后将其链接到https://gmail.com/. 一些客户端会将邮件标记为垃圾邮件或垃圾邮件。以尽可能少的颜色保存图像以节省尺寸。
如果可能，请将您的图片嵌入您的电子邮件中。电子邮件不必联系外部 Web 服务器来下载它们，它们也不会显示为电子邮件的附件。
And lastly, test, test, test! Each email client does things way differently than a browser would do.
最后，测试，测试，测试！每个电子邮件客户端的处理方式都与浏览器不同。
回答by SamMullins
Mail chimp have got quite a nice article on what not to do. ( I know it sounds the wrong way round for what you want)
Mail chimp 有一篇关于不该做什么的好文章。（我知道这听起来不像你想要的那样）
http://kb.mailchimp.com/article/common-html-email-coding-mistakes
http://kb.mailchimp.com/article/common-html-email-coding-mistakes
In general all the things that you have learnt that are bad practise for web design seem to be the only option for html email.
一般来说，您所学到的对于网页设计来说都是不好的做法似乎是 html 电子邮件的唯一选择。
The basics are:
基础知识是：
- Have absolute paths for images (eg. https://stackoverflow.com/random-image.png)
- Use tables for layout (never thought I'd recommend that!)
- Use inline styles (and old school css too, at the very most 2.1, box-shadow won't work for instance ;) )
- 具有图像的绝对路径（例如 https://stackoverflow.com/random-image.png）
- 使用表格进行布局（从没想过我会推荐！）
- 使用内联样式（以及旧式 css，最多 2.1，例如 box-shadow 将不起作用；））
Just test in as many email clients as you can get your hands on, or use Litmus as someone else suggested above! (credit to Jim)
只需在尽可能多的电子邮件客户端中进行测试，或者像上面建议的其他人一样使用 Litmus！（归功于吉姆）
EDIT :
编辑 ：
Mail chimp have done a great job by making this toolavailable to the community.
通过向社区提供此工具，Mail chimp 做得非常出色。
It applies your CSS classes to your html elements inline for you!
它会为您将您的 CSS 类应用到您的 html 元素内联！
回答by Stephan Muller
In addition to the answers posted here, make sure you read this article:
除了此处发布的答案外，请确保您阅读这篇文章：
回答by Gareth
The resource I always end up going back to about HTML emails is CampaignMonitor's CSS guide.
关于 HTML 电子邮件，我总是最终会返回的资源是CampaignMonitor 的 CSS 指南。
As their business is geared solely around email delivery, they know their stuff as well as anyone is going to
由于他们的业务完全围绕电子邮件交付，因此他们了解自己的东西以及任何人将要了解的内容
回答by Nathan MacInnes
'Fraid so. I'd make an HTML page with a stylesheet, then use jQuery to apply the stylesheet to the style attr of each element. Something like this:
'害怕这样。我会用样式表制作一个 HTML 页面，然后使用 jQuery 将样式表应用于每个元素的样式属性。像这样的东西：
var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
$('body *').css(styleAttributes[i],function () {
$(this).css(styleAttributes[i]);
});
}
Then copy the DOM and use that in the email.
然后复制 DOM 并在电子邮件中使用它。
回答by Stephen
I find that image mapping works pretty well. If you have any headers or footers that are images make sure that you apply a bgcolor="fill in the blank" because outlook in most cases wont load the image and you will be left with a transparent header. If you at least designate a color that works with the over all feel of the email it will be less of a shock for the user. Never try and use any styling sheets. Or CSS at all! Just avoid it.
我发现图像映射效果很好。如果您有任何作为图像的页眉或页脚，请确保应用 bgcolor="fill in the blank"，因为在大多数情况下，outlook 不会加载图像，并且您将留下一个透明的页眉。如果您至少指定了一种与电子邮件的整体感觉相协调的颜色，那么对用户来说就不那么令人震惊了。永远不要尝试使用任何样式表。或者根本就是 CSS！只是避免它。
Depending if you're copying content from a word or shared google Doc be sure to (command+F) Find all the (') and (") and replace them within your editing software (especially dreemweaver) because they will show up as code and it's just not good.
取决于您是从单词复制内容还是共享谷歌文档，请务必 (command+F) 找到所有 (') 和 (") 并在您的编辑软件（尤其是 dreemweaver）中替换它们，因为它们将显示为代码它只是不好。
ALT is your best friend. use the ALT tag to add in text to all your images. Because odds are they are not going to load right. And that ALT text is what gets people to click the (see images) button. Also define your images Width, Height and make the boarder 0 so you dont get weird lines around your image.
ALT 是您最好的朋友。使用 ALT 标签将文本添加到所有图像中。因为很可能它们不会正确加载。ALT 文本是让人们点击（见图片）按钮的原因。还要定义您的图像宽度、高度并使边界为 0，这样您的图像周围就不会出现奇怪的线条。
Consider editing all images within Photoshop with a 15px boarder on each side (make background transparent and save as a PNG 24) of image. Sometimes the email clients do not read any padding styles that you apply to the images so it avoids any weird formatting!
考虑在 Photoshop 中编辑所有图像，图像的每侧都有 15 像素的边框（使背景透明并另存为 PNG 24）。有时电子邮件客户端不会读取您应用于图像的任何填充样式，因此它避免了任何奇怪的格式！
Also i found the line under links particularly annoying so if you apply < style="text-decoration:none; color:#whatever color you want here!" > it will remove the line and give you the desired look.
我还发现链接下的行特别烦人，所以如果你应用 < style="text-decoration:none; color:#whatever color you want here!" > 它将删除线条并为您提供所需的外观。
There is alot that can really mess with the over all look and feel.
有很多东西真的会扰乱整体的外观和感觉。
