Outlook 软件去除电子邮件中的内联 CSS
Posted
技术标签:
【中文标题】Outlook 软件去除电子邮件中的内联 CSS【英文标题】：Outlook software strips out the inline CSS in emails 【发布时间】：2016-03-01 12:07:26 【问题描述】：我有一封类似如下的电子邮件。问题是，它在 Gmail 上运行良好，但在 Outlook 上，所有 CSS 内联语句都不起作用。
一个例子是：
<a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="img_dirfb.png" /></a>
//The image width is stripped out and the original size is used to display
有什么解决办法吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Welcome to Pure Apparel</title>
</head>
<body>
<table class="table table-mail" style="width: 100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);">
<tbody>
<tr>
<td class="space" style="width: 20px; padding: 7px 0;"> </td>
<td align="center" style="padding: 7px 0;">
<table class="table" bgcolor="#ffffff" style="max-width: 650px; width: 100%; border-collapse: collapse; margin: auto;">
<tbody>
<tr>
<td colspan="2" align="center" class="logo" style="padding: 7px 0;"><a title="shop_name" href="shop_url" style="color: #337ff1;"> <img src="shop_logo" /> </a></td>
</tr>
<tr>
<td colspan="2" align="center" class="titleblock" style="border-bottom: 1px solid #636566; border-top: 1px solid #636566; padding: 7px 0;"><a href="shop_url56-new-in" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">New-In</a> <a href="shop_url23-women" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Women</a> <!--<a href="shop_url40-men" style="font-weight:500;font-size:17px;line-height:26px;width:20%;float:left;color:#555454;text-decoration:none;">Men</a>--> <a href="shop_urlcontent/7-fw15" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Lookbook</a> <a href="http://pureapparel.me/" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Be-pure blog</a></td>
</tr>
<tr>
<td colspan="2"><a href="shop_urlcontent/24-international-shipping"><img style="width: 100%; display: block;" src="img_diren/welcome.jpg" /></a></td>
</tr>
<tr style="border-bottom: 1px solid #636566; text-align: center;">
<td style="padding: 10px 0px;">
<h3 style="margin-top: 5px;">New Collection</h3>
<p>Enjoy online shopping with our easy check out process and reliable door to door courier service.</p>
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; margin-bottom: 5px; text-decoration: none;" href="shop_url" target="_blank">Shop now</a></td>
<td style="padding: 10px 0px;"><img style="width: 200px;" src="img_dirbox1.jpg" /></td>
</tr>
<tr style="border-bottom: 1px solid #636566; text-align: center;">
<td style="padding: 10px 0px;"><img style="width: 200px;" src="img_dirbox2.jpg" /></td>
<td style="padding: 10px 0px;">
<h3>be-pure blog</h3>
<p>With access to our be-pure blog, be the first to know about our newest design, latest yoga & fitness trends and community events.</p>
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; text-decoration: none;" href="http://pureapparel.me/" target="_blank">View blog</a></td>
</tr>
<tr style="border-bottom: 1px solid #636566;">
<td colspan="2" style="padding: 10px 0px;">
<h3>Have a Question?</h3>
<div style="width: 100%; text-align: center;"><img style="width: 120px; margin-right: 10px;" src="img_diren/q1.jpg" /> <img style="width: 120px; margin-right: 10px;" src="img_diren/q2.jpg" /> <img style="width: 120px;" src="img_diren/q3.jpg" /></div>
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
<p>Stay connected with us</p>
<div><a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="img_dirfb.png" /></a> <a href="https://twitter.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="img_dirtw.png" /></a> <a href="http://instagram.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="img_dirig.png" /></a></div>
<p>Please add <a style="text-decoration: none; color: #58595b;" href="mailto:newsletter@be-pure.com">newsletter@be-pure.com</a> to your approved senders or address book.</p>
<p>If you do not wish to receive any eNews, please click here to update your preferences or <a href="my_account_url" style="color: #58595b;">unsubscribe</a> from this list</p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="float: left; text-align: center; width: 25%;">@2015 Pure Retail Ltd.</p>
<p style="float: left; text-align: center; width: 25%;"><a href="shop_url" style="text-decoration: none; color: #58595b;">www.be-pure.com</a></p>
<p style="float: left; text-align: center; width: 25%;"><a href="shop_urlcontent/3-terms-and-conditions-of-use" style="text-decoration: none; color: #58595b;">Terms & Conditions</a></p>
<p style="float: left; text-align: center; width: 25%;"><a href="shop_urlcontent/15-privacy-policy" style="text-decoration: none; color: #58595b;">Privacy Policy</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td class="space" style="width: 20px; padding: 7px 0;"> </td>
</tr>
</tbody>
</table>
</body>
</html>
实际上，源代码并没有去除 CSS，但是当查看页面时，Outlook 就像去除了 CSS 一样，有什么想法吗？
更新（2015 年 11 月 29 日）：
所以，我终于发现width:50px不行了，我必须用width="50"来控制大小，因为我只需要支持Outlook 2013及更高版本，我想知道：
Outlook 2013 是否真的不支持 IMG 标签上的 width:50px 之类的内联 CSS？
如果确实支持，问题是否出在电子邮件服务器上？
有没有更简单的方法可以将我的模板转换为支持 Outlook 2013？
【问题讨论】：
所有内联样式都被剥离了？ 等一下，我会发邮件的源代码谢谢 已更新，请多多包涵，谢谢帮助。 似乎填充/文本样式等..都不起作用 微软再次让我们的工作更加努力......这不足为奇。我也有内联样式，并且只在发生的 MS 程序上。没有露营者要求使用此功能？ 【参考方案1】：Outlook 使用不同的方式来执行样式表。不是 SMTP 设置或电子邮件设置。这取决于 Gmail、Outlook 和 Yahoo 等电子邮件服务如何显示 CSS。 Outlook 样式如何 = IE 样式如何。
我使用 Mailchimp 对我使用的每个 p 元素执行此操作，它在 Outlook 和 Gmail 中看起来并不完全相同，但它是我能得到的最接近的。
<p class="MsoNormal" style="text-align:justify; line-height:150%; font-family:Arial, Helvetica, sans-serif;">
我用于 Outlook 的指南是这样的。请注意，您必须加入他们的社区（免费）才能获得 Outlook 指南，我认为这是值得的，并且可以为您省去麻烦。 https://www.emailonacid.com/resources
上一个链接应该向您解释，但如果您想了解更多信息，您可以随时查看我使用的以下两个链接。
对于 Outlook/Hotmail，它们通常在样式前面有 mso 语法，例如
http://templates.mailchimp.com/development/css/outlook-conditional-css/
对于电子邮件提供商使用的某些元素，您可以在此处参考。 https://www.campaignmonitor.com/css/
花一些时间创建一个适用于所有电子邮件服务的电子邮件模板，并在下次修改它以满足您的需求，这比从头开始节省更多的时间和精力。
【讨论】：
目前还不支持 padding, margin, height, width, oh my god 我想创建一个带有内边距和背景颜色的按钮，但效果不佳 你有按钮的代码吗？填充可能有一些问题，如果按钮中有文本，可能会导致一些行高问题。 谢谢，我现在用table来创建按钮，现在的问题是如何指定一个div的高度？ 尝试使用行高或边距【参考方案2】：Outlook 不会忽略内联样式。它虽然不理解很多 CSS 属性。今天我们认为理所当然的事情：浮动，边距，填充。 Campaign Monitor 有一个很好的table of which things will work in which email clients。
您几乎总是可以通过大量嵌套表格来解决这个问题。它很丑，但它是跨平台的，这才是最重要的。
有时在电子邮件营销中，您必须接受它不会在每个电子邮件客户端中看起来都 100% 相同，没关系。只要它在每个客户端看起来不错，这里和那里是否有 2px 的额外间距都没关系。
电子邮件营销通常是关于渐进式增强。您为使用 Lotus Notes 和其他旧客户端的人们尽了最大的努力，并为在 Chrome 上使用 Gmail 的人们添加了最后的润色。例如，即使 Outlook 不支持媒体查询，您仍然可以（并且可能应该）使用它们，因为其他客户端会。这样做的好处是，如果电子邮件客户端支持媒体查询，那么它们很可能也支持更现代的东西，比如浮动，所以如果你愿意，你可以在媒体查询中使用类似的属性。
CSS-tricks 有一篇相当不错的文章讨论了general sort of methodology you should follow。
编写 HTML 电子邮件在很大程度上是一种体验。做到这一点，你就会发现与为网络编写相比，你必须以不同的方式做事。我强烈建议您通过Litmus 测试您所做的任何事情，特别是如果您正在为客户制作工作。据说Email On Acid也不错。他们将向您展示您的电子邮件在几乎所有电子邮件客户端中的呈现方式。它们是订阅服务，但据我所知，确实没有任何类似的免费服务。
【讨论】：
现在有 EmailOnAcid，它在质量方面可能不太好，但它更便宜并且具有提供无限预览的巨大优势，而 Litmus 即使在高级版中也提供非常非常少量的预览版本。 @papillon 我在使用 Litmus 时没有遇到真正的问题。不过那是几年前的事了。我也添加了该服务的链接。以上是关于Outlook 软件去除电子邮件中的内联 CSS的主要内容，如果未能解决你的问题，请参考以下文章
在 Yahoo 和 Gmail 中显示时，HTML 电子邮件的内联 CSS 不断被剥离
如何让 MS Outlook 接受 CSS 样式 display:block？