Question

我正在发送HTML电子邮件，并希望使用一些带有“徽章”的文本来设置样式。下面的代码在Outlook Web和Thunderbird上有效，但在Outlook本机Windows 10上无效。

在成功案例中看起来像这样：

在Windows 10版Outlook中，文本如下所示：

我不要求它们看起来相同，我只是希望它看起来不差。因此，如果有人对样式有完全不同的想法，我会接受的。

其他技术信息

我唯一关心的电子邮件客户端是Outlook（Windows 10本机，Office 365，当前为1902），用于Office 365的Outlook Web和Thunderbird（最新版本）。
我已经验证了用于发送电子邮件的系统不会剥离html / css的一部分。
这是一个可重复的最小测试用例

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  position: relative;
  top: -1px;
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
  color: #212529;
  background-color: #ffc107;
}

Badges with embedded sytesheet <span class="badge ">v1.1.1</span>&nbsp;<span class="badge badge-pill badge-branch">v1.1.2</span>

<br>
Badges with inline style
<span style="display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; position: relative; top: -1px; padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; color: #212529; background-color: #ffc107;">v2.0.0</span>&nbsp;
<span style="display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; position: relative; top: -1px; padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; color: #212529; background-color: #ffc107;">v2.0.1</span>&nbsp;

Answer 1

我认为Outlook中不支持圆形边框，如果您不使用webpack或类似的东西，我认为您必须在代码中添加这两个-webkit-border-radius和-moz-border-radius另外，为border-radius添加额外的支持。另外，社区中存在一个类似的问题可以帮助您解决问题，请查看this以获取更多信息。

Answer 2

如果可以从外部服务器加载图像，请尝试使用shields.io。尝试添加<img src="https://img.shields.io/badge/-Your Text Here-yellow">而不是徽章CSS。如果未显示，请在末尾添加.png。

看起来像

HTML电子邮件-在文本周围放置“徽章”格式

2 个答案: