【问题标题】: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 只要你把它放在正确的标签中。那个空的&lt;a&gt; 标签可能会影响前景。

    尝试将您的代码更改为:

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

    您还可以将内联样式直接放在 &lt;a&gt; 标记中,而同时丢失 &lt;span&gt;

    <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 来找到解决方案,因此我不能使用脚本或外部样式表,因此没有必要在此级别尝试您的代码。需要与客户沟通以获得更好的解决方案,例如您的解决方案。一旦我获得客户批准在电子邮件页面中使用脚本,您的回答可能会对我有所帮助。无论如何感谢您的努力!
      猜你喜欢
      • 2015-06-28
      • 2013-05-31
      • 2013-02-28
      • 2012-02-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-12-14
      相关资源
      最近更新 更多