关于 Outlook 邮件临时 CSS 的问题答案

【问题标题】：Question regarding CSS in Outlook mail temp关于 Outlook 邮件临时 CSS 的问题
【发布时间】：2022-01-18 15:48:20
【问题描述】：

我正在为库存确认电子邮件制作邮件模板，而我必须做的邮件包含一些我正在努力寻找资源的内容，因此如果您知道任何有关它的资源都有帮助的话。我正在尝试制作一个在 Outlook/Microsoft 邮件上看起来也不错的响应式邮件模板，而为项目颜色制作圆圈对我来说是最麻烦的。

【问题讨论】：

你有更多关于你会在哪里使用这个圆圈图标的细节吗？在清单项目上？你能分享一个上下文截图吗？
我基本上多了几张迷你桌子，每张桌子都包含一件商品，上面有产品图片/品牌/产品名称/尺寸/颜色（我说的是这个）/价格

标签： html css email magento outlook

【解决方案1】：

这是一个示例，说明如何使用 HTML、CSS 和 Windows 上的 The Outlooks 的专用 VML 后备来执行此操作。

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Question regarding CSS in Outlook mail temp</title>
  <!-- https://stackoverflow.com/questions/70364018/question-regarding-css-in-outlook-mail-temp?noredirect=1#comment124384406_70364018 -->
    <!--[if mso]>
    <xml>
    <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
</head>
<body>
  <!--[if !mso]><!-->
  <div style="width:24px;" role="img" aria-label="Pink color">
    <div style="border:4px solid #000; border-radius:50%;">
      <div style="padding:2px;">
        <div style="width:12px; height:12px;background-color:#f587d8; border-radius:50%;"></div>
      </div>
    </div>
  </div>
  <!--<![endif]-->
    <!--[if mso]>
  <v:group style="position:relative; width:24px; height:24px;" coordsize="24,24">
      <v:oval style="position:absolute; left:0; top:0; width:24px; height:24px; z-index:1;" stroked="false" fillcolor="#000000"></v:oval>
      <v:oval style="position:absolute; left:4px; top:4px; width:16px; height:16px; z-index:2;" stroked="false" fillcolor="#ffffff"></v:oval>
      <v:oval style="position:absolute; left:6px; top:6px; width:12px; height:12px; z-index:3;" stroked="false" fillcolor="#f587d8"></v:oval>
  </v:group>
    <![endif]-->
</body>
</html>

这里是test results of rendering on Email on Acid。

【讨论】：

你是魔术师，谢谢！

【解决方案2】：

您可以在电子邮件中使用 <style> 标签来创建类似的内容。还支持内联样式。

.circle{
    height: 16px;
    width: 16px;
    border-radius: 50%;
    outline: 2px solid;
    outline-offset: 2px;
    background-color: #f589d9;
}

&lt;div class="circle"&gt;&lt;/div&gt;

【讨论】：

我试过了，它在 Outlook 桌面版中没有显示任何内容。
您如何测试电子邮件模板？
通过发送带有 html/css 的邮件并检查它在所有平台上的外观。