HTML Email - добавление форматирования «значка» вокруг текста

Question

Я отправляю электронные письма в формате HTML и хочу оформить текст с помощью «значков» вокруг него. Приведенный ниже код работает в Outlook Web и Thunderbird, но не в родной версии Outlook 10.

Хотя в случаях успеха это выглядит так:

Текст в Outlook для Windows 10 выглядит следующим образом:

Мне не требуется, чтобы они выглядели одинаково, я просто хочу, чтобыне плохо выглядишь. Так что, если у кого-то есть совершенно другая идея стиля, я открыт для нее.

---

Другая техническая информация

• Единственные почтовые клиенты, которые меня интересуют - это Outlook (Windows 10нативный, Office 365, в настоящее время 1902), Outlook Web для Office 365 и 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

Если вы согласны с загрузкой изображений с внешнего сервера, попробуйте использовать shields.io . попробуйте добавить <img src="https://img.shields.io/badge/-Your Text Here-yellow"> вместо значка CSS. Если это не отображается, добавьте .png в конец.

Это будет выглядеть как

Answer 2

Я считаю, что округленные границы не поддерживаются в Outlook, и если вы не используете веб-пакет или что-то подобное, я думаю, что вам нужно добавить эти два -webkit-border-radius и -moz-border-radius в ваш код, чтобы добавитьдополнительная поддержка для border-radius. Кроме того, в сообществе существует аналогичный вопрос, который может помочь вам решить вашу проблему. Для получения дополнительной информации обратитесь к this .