个人中心
gpt4 book ai didi

html - Outlook 软件去除了电子邮件中的内联 CSS

转载 作者：技术小花猫 更新时间：2023-10-29 12:20:34 29 4
gpt4 key购买 nike

我有一封如下所示的电子邮件。问题是，它在 Gmail 上运行良好，但在 Outlook 上，所有 CSS 内联语句都不起作用。

一个例子是:

<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

有什么解决办法吗？ 

<!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: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_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>

实际上，源代码并没有剥离 CSS，但是当查看页面时，Outlook 就像剥离了 CSS，知道吗？

更新(29/11/2015):

所以，我终于发现 width:50px 不起作用，我必须使用 width="50" 来控制大小，因为我只需要支持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="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/

花一些时间创建一个适用于所有电子邮件服务的电子邮件模板并在下次修改它以满足您的需求比从头开始节省更多的时间和精力。

关于html - Outlook 软件去除了电子邮件中的内联 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33954831/

29 4 0
文章推荐： python - 如何使用 python 获取给定 url 的原始 html 文本
文章推荐： c - 有效地使用 siglongjmp
文章推荐： linux - 阻止 Perl 的 `tie` 在我的串行接口(interface)上​​重置我的 Arduino/脉冲 DTR
文章推荐： html - 当 ng-if = false 时淡出动画
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com