Html Outlook 软件去除电子邮件中的内联 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33954831/
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
Outlook software strips out the inline CSS in emails
提问by user3538235
I have an email like the following. The problem is, it works fine on Gmail, but on outlook, all CSS inline statements don't work.
我有一封类似下面的电子邮件。问题是，它在 Gmail 上运行良好，但在 Outlook 中，所有 CSS 内联语句都不起作用。
One example is:
一个例子是：
<a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a>
//The image width is stripped out and the original size is used to display
Are there any fixes for this?
有什么解决办法吗？
<!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}" alt="{shop_name}" /> </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_url}56-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_url}23-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_url}40-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_url}content/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_url}content/24-international-shipping"><img style="width: 100%; display: block;" src="{img_dir}en/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_dir}box1.jpg" /></td>
</tr>
<tr style="border-bottom: 1px solid #636566; text-align: center;">
<td style="padding: 10px 0px;"><img style="width: 200px;" src="{img_dir}box2.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_dir}en/q1.jpg" /> <img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q2.jpg" /> <img style="width: 120px;" src="{img_dir}en/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_dir}fb.png" /></a> <a href="https://twitter.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}tw.png" /></a> <a href="http://instagram.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}ig.png" /></a></div>
<p>Please add <a style="text-decoration: none; color: #58595b;" href="mailto:[email protected]">[email protected]</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_url}content/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_url}content/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>
Actually, the source code does not strip the CSS, but when the page is viewed, Outlook acts as if the CSS is stripped out, any idea?
实际上，源代码并没有剥离 CSS，但是当查看页面时，Outlook 就像剥离了 CSS 一样，知道吗？
Update (29/11/2015):
更新（29/11/2015）：
So, I finally found out that width:50pxis not working, I have to use width="50"to control the size, as I only need to support Outlook 2013 and later versions, I wonder:
所以，我终于发现width:50px不行，我只好用来width="50"控制大小，因为我只需要支持Outlook 2013及更高版本，我想知道：
Is it true that Outlook 2013 doesn't support inline CSS like
width:50pxon IMG tags?If it does support it, does the problem lie on the email server instead?
Are there any easier ways to convert my template to support Outlook 2013?
Outlook 2013 真的不支持像
width:50pxIMG 标签那样的内联 CSS吗？如果它确实支持它，问题是否出在电子邮件服务器上？
是否有任何更简单的方法可以将我的模板转换为支持 Outlook 2013？
采纳答案by cweitat
Outlook uses a different way of executing stylesheet. Is not SMTP settings or email settings. It depends on how the email service like Gmail, Outlook and Yahoo displays the CSS. How Outlook styles = How IE styles.
Outlook 使用不同的方式来执行样式表。不是 SMTP 设置或电子邮件设置。这取决于 Gmail、Outlook 和 Yahoo 等电子邮件服务如何显示 CSS。Outlook 风格 = IE 风格。
I've used Mailchimp did this for every pelement I used and it does not looks exactly the same in Outlook and Gmail but is the closest I can get.
我已经使用 Mailchimp 对p我使用的每个元素都这样做了，它在 Outlook 和 Gmail 中看起来并不完全相同，但它是我能得到的最接近的。
<p class="MsoNormal" style="text-align:justify; line-height:150%; font-family:Arial, Helvetica, sans-serif;">
The guide I used for Outlook is this. Do note that you have to join their community ( free) to get the Outlook guide, which I think is worth it and save you the trouble. https://www.emailonacid.com/resources
我用于 Outlook 的指南是这样的。请注意，您必须加入他们的社区（免费）才能获得 Outlook 指南，我认为这是值得的，并为您省去麻烦。 https://www.emailonacid.com/resources
The previous link should explain to you but if you want more information, you can always look the below two links that I used as well.
上一个链接应该向您解释，但如果您想了解更多信息，您也可以随时查看我使用的以下两个链接。
For Outlook/Hotmail, they usually have a msosyntax in front of the styling like
http://templates.mailchimp.com/development/css/outlook-conditional-css/
对于 Outlook/Hotmail，它们通常mso在样式前面有一个语法，如
http://templates.mailchimp.com/development/css/outlook-conditional-css/
For certain elements that email provider use, you can refer here. https://www.campaignmonitor.com/css/
对于电子邮件提供商使用的某些元素，您可以参考此处。 https://www.campaignmonitor.com/css/
Spend some time creating a email template that works for all email services and modify it next time to suit your needs saves much more time and effort than starting from scratch.
花一些时间创建一个适用于所有电子邮件服务的电子邮件模板，并在下次修改它以满足您的需求，这比从头开始节省更多的时间和精力。
回答by Michael
Outlook doesn't ignore inline styles. It doesn't understand quite a few CSS properties though. Things which today we take for granted: floats, margins, padding. Campaign Monitor have a very good table of which things will work in which email clients.
Outlook 不会忽略内联样式。虽然它不理解相当多的 CSS 属性。今天我们认为理所当然的事情：浮点数、边距、填充。Campaign Monitor 有一个很好的表格，其中列出了哪些内容将在哪些电子邮件客户端中起作用。
You can almost always get around this with lots and lots of nested tables. It's ugly but it's cross-platform and that's all that matters.
您几乎总是可以通过大量嵌套表来解决这个问题。它很丑，但它是跨平台的，这才是最重要的。
Sometimes in email marketing you have to accept that it's not going to look 100% identical in every email client and that's okay. As long as it looks goodin every client, it doesn't matter if there is 2px extra spacing here and there.
有时在电子邮件营销中，您必须接受它不会在每个电子邮件客户端中看起来 100% 相同，这没关系。只要它在每个客户端看起来都不错，这里和那里是否有 2px 的额外间距都没有关系。
Email marketing is often about progressive enhancement. You do the best you can for the people using Lotus Notes and other old clients and you add the finishing touches for the people using Gmail on Chrome. For example, even though Outlook doesn't support media queries, you can still (and probably should) use them because other clients will. The nice thing about that is that if an email client supports media queries, chances are they also support more modern things like floats, so you're able to use properties like that within the media queries if you want.
电子邮件营销通常是关于渐进式增强。您为使用 Lotus Notes 和其他旧客户端的人尽您所能，并为在 Chrome 上使用 Gmail 的人添加最后的润色。例如，即使 Outlook 不支持媒体查询，您仍然可以（并且可能应该）使用它们，因为其他客户端会。这样做的好处是，如果电子邮件客户端支持媒体查询，那么它们很可能也支持更现代的东西，例如浮动，因此您可以根据需要在媒体查询中使用类似的属性。
CSS-tricks have a fairly good article which discusses the general sort of methodology you should follow.
CSS-tricks 有一篇相当不错的文章，讨论了您应该遵循的一般方法。
Writing HTML emails is largely a matter experience. Do it enough and you'll figure out the different ways you have to do things compared to writing it for the web. I highly recommend testing anything you do through Litmus, especially if you're producing work for a client. It will show you how your email renders in almost any email client. It's a subscription service - and an expensive one at that - but there really isn't any comparable free service.
编写 HTML 电子邮件在很大程度上是一种物质体验。做得足够多，你会发现与为网络编写它相比，你必须以不同的方式做事。我强烈建议您通过Litmus测试您所做的任何事情，尤其是在您为客户制作作品时。它将向您展示您的电子邮件在几乎所有电子邮件客户端中的呈现方式。这是一项订阅服务——而且价格昂贵——但确实没有任何可比的免费服务。
