Outlook软件剥离电子邮件中的内联CSS [英] Outlook software strips out the inline CSS in emails

问题描述

我有一封电子邮件，如下所示。问题是，它在Gmail上工作正常，但在Outlook中，所有CSS内联语句都不起作用。一个例子是：

 < a href =https ：//www.facebook.com/BePureAppareltarget =_ blank>< img style =width：35px; src ={img_dir} fb.png/>< / a> 
 
 //图像宽度被删除，原始大小用于显示
  

是否有任何修复？

 <！DOCTYPE html PUBLIC -  // W3C // DTD HTML 4.01 // ENhttp：// www .w3.org / TR / 1999 / REC-html401-19991224 / strict.dtd> 
< html> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8> 
< title>欢迎来到Pure Apparel< / title> 
< / head> 
< body> 
< table class =table table-mailstyle =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 =spacestyle =width：20px; padding：7px 0;>& nbsp;< / td> 
< td align =centerstyle =padding：7px 0;> 
< table class =tablebgcolor =＃ffffffstyle =max-width：650px; width：100％; border-collapse：collapse; margin：auto;> 
< tbody> 
< tr> 
< td colspan =2align =centerclass =logostyle =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 =2align =centerclass =titleblockstyle =border-bottom：1px solid＃636566; border-top：1px solid＃636566; padding：7px 0;> ;< a href ={shop_url} 56-new-instyle =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-womenstyle =font-weight：500; font-size：17px; line-height：26px; width：25％; float：left; color：＃555454;装饰：无;>妇女< / a> <！ - < a href ={shop_url} 40-menstyle =font-weight：500; font-size：17px; line-height：26px; width：20％; float：left; color： ＃555454;文字修饰：无;>男子LT; / A>  - > < a href ={shop_url} content / 7-fw15style =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;>新集合< / h3> 
< p>享受网上购物，我们轻松的退房流程和可靠的门到门快递服务。< / p> 
< a style =display：block; text-align：center; width：100px; color：#ffffff; background-color：＃58595b; padding：8px; margin：auto; margin-bottom：5px;文字装饰：无; href ={shop_url}target =_ blank>立即购买< / 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>纯纯博客< / h3> 
< p>访问我们纯粹的博客，成为第一个了解我们最新设计，最新瑜伽&健身趋势和社区活动。< / 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>查看博客< / a>< / td> 
< / tr> 
< tr style =border-bottom：1px solid＃636566;> 
< td colspan =2style =padding：10px 0px;> 
< h3>有问题？< / 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>与我们保持联系< / p> 
< div>< a href =https://www.facebook.com/BePureAppareltarget =_ blank>< img style =width：35px; src ={img_dir} fb.png/>< / a> < a href =https://twitter.com/be_pureappareltarget =_ blank>< img style =width：35px; src ={img_dir} tw.png/>< / a> < a href =http://instagram.com/be_pureappareltarget =_ blank>< img style =width：35px; src ={img_dir} ig.png/>< / a>< / div> 
< p>请添加< a style =text-decoration：none; color：＃58595b; HREF = 电子邮件地址：[e-mail] > [e-mail]< / A>到您的认可发件人或通讯录。< / p> 
< 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为H. 
< 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&状况及LT; / A>< / p为H. 
< p style =float：left; text-align：center; width：25％;>< a href ={shop_url} content / 15-privacy-policystyle =装饰：无;颜色：＃58595b;>隐私权政策< / a>< / p> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / td> 
< td class =spacestyle =width：20px; padding：7px 0;>& nbsp;< / td> 
< / tr> 
< / tbody> 
< / table> 
< / body> 
< / html> 
  

实际上，源代码没有剥离CSS，但是当页面被查看时，Outlook作为如果CSS被剥离，任何想法？

更新（29/11/2015）：

所以，我终于发现， width：50px 不起作用，我必须使用 width =50 code>来控制大小，因为我只需要支持Outlook 2013和更高版本，我想知道：

1. Outlook 2013不支持IMG标签上的 width：50px 的内联CSS




2. 如果它支持它，问题是在电子邮件服务器上吗？




3. 有没有更简单的方法来转换我的模板来支持Outlook 2013？




解决方案

Outlook使用不同的执行样式表的方法。不是SMTP设置或电子邮件设置。这取决于Gmail，Outlook和Yahoo等电子邮件服务如何显示CSS。如何Outlook样式=如何IE样式。

我已经使用Mailchimp为每个 p 元素使用了它，但它看起来并不完全相同Outlook和Gmail是最接近的。

 < p class =MsoNormalstyle =text-align：justify; line-height：150％家庭：Arial，Helvetica，sans-serif;> 
  

我用于Outlook的指南是这样的。请注意，您必须加入他们的社区（免费）才能获得Outlook指南，我认为这是值得的，并为您节省了麻烦。
https://www.emailonacid.com/resources

以前的链接应该向你解释，但是如果你想要更多的信息，你可以随时查看我使用的以下两个链接。

对于Outlook / Hotmail，他们通常在样式前面有一个 mso 语法，如
< a href =http://templates.mailchimp.com/development/css/outlook-conditional-css/> http://templates.mailchimp.com/development/css/outlook-conditional-css/

对于电子邮件提供商使用的某些元素，您可以参考这里。
https://www.campaignmonitor.com/css/

花费一些时间创建一个适用于所有电子邮件服务的电子邮件模板，并根据您的需要进行修改以节省比从头开始更多的时间和精力。

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.

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;">&nbsp;</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:[e-mail]">[e-mail]</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;">&nbsp;</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?

Update (29/11/2015):

So, I finally found out that width:50px is 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:

1. Is it true that Outlook 2013 doesn't support inline CSS like width:50px on IMG tags?

2. If it does support it, does the problem lie on the email server instead?

3. Are there any easier ways to convert my template to support Outlook 2013?

解决方案

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.

I've used Mailchimp did this for every p element I used and it does not looks exactly the same in Outlook and Gmail but is the closest I can get.

<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

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 mso syntax in front of the styling like 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/

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.

这篇关于Outlook软件剥离电子邮件中的内联CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！