HTML 电子邮件样式在 Outlook 中不起作用答案

【问题标题】：HTML Email style not working in OutlookHTML 电子邮件样式在 Outlook 中不起作用
【发布时间】：2016-10-05 17:08:48
【问题描述】：

我有一个 CSS 属性内嵌到 HTML 电子邮件 text-transform:lowercase 到 span 元素。当我发送电子邮件时，它显示字体为小写，除了 Outlook。似乎字体样式不适用于 Outlook。插入也适用于 Outlook 的内联样式的正确方法是什么？

<a><span style="text-transform:lowercase;letter-spacing:4px;">shop now</span></a>

展望

其他电子邮件客户端

【问题讨论】：

您使用的是哪个 Outlook 版本？好像 Outlook 支持 text-transform campaignmonitor.com/css
@Justinas 是的。真的。但仍然遇到问题。使用 Outlook 2013。
也许在将文本放入电子邮件之前尽可能多地对其进行预处理？
你知道了吗@rifa_at_so ？
@Angel ofDemons 还没有。

标签： html css outlook html-email

【解决方案1】：

自 Outlook 2007 以来，Outlook 已将 Word 用于其 HTML 格式，这意味着 Outlook 不允许所有标准 CSS。一个例子是文本转换。其他人发布了一个指向 CampaignMonitor.com 的链接，其中指出 Outlook 支持文本转换，但事实并非如此。您可以在 Microsoft 网站上的“不支持的级联样式表属性与级联样式表的比较，级别 1”部分下自行查看：https://msdn.microsoft.com/en-us/library/aa338201.aspx

【讨论】：

【解决方案2】：

一般来说 Outlook supports text-transform 只要你把它放在正确的标签中。那个空的<a> 标签可能会影响前景。

尝试将您的代码更改为：

<a href="#"><span style="text-transform:lowercase;letter-spacing:4px;">shop now</span></a>

您还可以将内联样式直接放在 <a> 标记中，而同时丢失 <span>：

<a href="#" style="text-transform:lowercase;letter-spacing:4px;">shop now</a>

【讨论】：

【解决方案3】：

您可以尝试将值更改为小写，然后再将其放入电子邮件中，可能如下所示：

   var MyDiv1 = document.getElementById('text');
   var MyDiv2 = document.getElementById('second');

    var res = MyDiv1.innerHTML.toLowerCase();

   MyDiv2.innerHTML = 'changed ' + MyDiv1.innerHTML + ' to ' + res;
       MyDiv1.innerHTML = 'Now you can use the variable `res` as a variable in the email';

<span id="text">SHOP NOW</span>
<br />
<span id="second"></span>

【讨论】：

不幸的是。我不能在 html 页面中使用任何脚本。只是纯 html 和内联 css。有没有其他方法可以做到这一点。
我不知道，因为据我所知 Outlook 会阻止 text-transform。我能问一下为什么不能在屏幕顶部使用 javascript 将其设置为变量吗？
这是客户要求，我认为我们没有其他方法可以仅使用内联 css 样式来做到这一点。在这种情况下，您的回答可能会帮助我解决这个问题。谢谢！
我的回答对你有帮助吗？还是没有那么多？如果您还有其他需要，只需提及它，我将尝试编辑我的答案。祝你好运！如果答案对您有用，请接受它，以便其他来这里的人可以看到正确答案
由于我的要求是通过仅使用内联 css 来找到解决方案，因此我不能使用脚本或外部样式表，因此没有必要在此级别尝试您的代码。需要与客户沟通以获得更好的解决方案，例如您的解决方案。一旦我获得客户批准在电子邮件页面中使用脚本，您的回答可能会对我有所帮助。无论如何感谢您的努力！