Я написал HTML шаблон электронной почты, который, кажется, работает хорошо, за исключением почтового клиента Outlook 2019 (версия 16)
У меня есть этот 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;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.badge-success {
color: #fff;
background-color: #28a745;
}
И я используйте его таким образом
<span style="color: #ffffff;">WHITE</span>
На нем должен быть зеленый значок (цвет фона: # 28a745;) с белым текстом. Outlook 16 возвращает только текст WHITE без цвета фона, что делает его нечитаемым на белом фоне.
Существует ли решение?
Можно ли указать стиль CSS только для Outlook? Если да, то как? Например, что мне делать, если я настрою стиль CSS для использования
.badge-success {
color: #000;
}
для почтового клиента Outlook
и
.badge-success {
color: #fff;
background-color: #28a745;
}
для почтового клиента не из Outlook ?
Полный код моего HTML электронного письма здесь:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Blank Template for Bootstrap</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
.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;
#transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.badge-success {
color: #fff;
background-color: #28a745;
}
.alert-link {
font-weight: 700;
}
a {
text-decoration: none;
background-color: transparent;
}
.auto-style1 {
font-size: 16px;
}
.auto-style2 {
font-size: 16px;
color: #003166;
}
</style>
</head>
<body>
<!-- color bar using tables -->
<table style="width: 100%; " cellpadding="2" cellspacing="0" class="border-width: 0;background-color: #CCFFFF;">
<tr>
<td style="background-color: #e3effb; border-bottom-width: 4px; border-bottom: 3px solid #b9d8f4; border-top: 12px solid #e3effb;"></td>
</tr>
</table>
<!-- grey cell background -->
<table style="width: 100%; border-width: 0; " cellpadding="2" cellspacing="0">
<tr>
<td style="background-color: #FBFBFB;">
<!-- container fluid emulator-->
<table style="width: 100%; border-width: 0; " cellpadding="2" cellspacing="0">
<tr>
<td style="background-color: #FFFFFF;">
<!-- alert css emulator blue -->
<table style="width: 100%; border-width: 0; " cellpadding="2" cellspacing="4">
<tr>
<td style="border-spacing: 0px; border-collapse: collapse; line-height: 24px; border-radius: 4px; margin: 0; padding: 12px 20px; border: 1px solid transparent;" align="left" bgcolor="#cce5ff" class="auto-style2">
<span lang="it">test</span></td>
</tr>
</table>
<!-- alert css emulator yellow -->
<table style="width: 100%; border-width: 0; " cellpadding="2" cellspacing="4">
<tr>
<td style="border-spacing: 0px; border-collapse: collapse; line-height: 24px; font-size: 16px; border-radius: 4px; color: #856404; margin: 0; padding: 12px 20px; border: 1px solid transparent; background-color: #FFF3CD;
border-color: #ffeeba;" align="left">
<span lang="it">test</span></td>
</tr>
</table>
<!-- container for rows :: boostrap fluid emulator-->
<table style="width: 100%; border-width: 0; " cellpadding="4" cellspacing="0">
<tr>
<td>
<!-- bootstraps rows emulator -->
<table style="width: 100%; border-width: 0; " cellpadding="0" cellspacing="0">
<tr>
<td style="border-spacing: 0px; border-collapse: collapse; line-height: 20px; font-size: 16px; color: #2f3030; margin: 0; padding: 6px 10px; border-top: 1px solid transparent; border-bottom: 1px dotted #424040; border-left: 2px solid #514f4f; border-right: 2px solid #514f4f; background-color: #F8F8F8;"
align="left">
<table style="width: 100%">
<tr>
<td style="width: 80px; text-align: center;" valign="top"><span class="badge badge-success">
<a href="pippo.com"><span style="color: #ffffff;">WHITE</span></a>
</span>
</td>
<td valign="top"><span lang="it">test</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-spacing: 0px; border-collapse: collapse; line-height: 20px; font-size: 16px; color: #2f3030; margin: 0; padding: 6px 10px; border-top: 1px solid transparent; border-bottom: 1px dotted #424040; border-left: 2px solid #bbb8b8; border-right: 2px solid #bbb8b8; background-color: #F8F8F8;"
align="left">
<table style="width: 100%">
<tr>
<td style="width: 80px; text-align: center;" valign="top"><span class="badge badge-success"><a href="pippo.com"><span style="color: #ffffff;">WHITE</span></a>
</span>
</td>
<td valign="top"> <span lang="it">test</span></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end bootstrap rows emulator -->
<!-- end container for rows :: boostrap fluid emulator-->
</td>
</tr>
</table>
<!-- alert css emulator yellow -->
<table style="width: 100%; border-width: 0; " cellpadding="2" cellspacing="4">
<tr>
<td style="border-spacing: 0px; border-collapse: collapse; line-height: 24px; border-radius: 4px; color: #856404; margin: 0; padding: 12px 20px; border: 1px solid #ffeeba; background-color: #FFF3CD;
" align="left" class="auto-style1"><span lang="it">test</span></td>
</tr>
</table>
<!-- end container fluid emulator -->
</td>
</tr>
</table>
<!-- end grey cell background -->
</td>
</tr>
</table>
<table style="width: 100%; " cellpadding="2" cellspacing="0" class="border-width: 0;background-color: #CCFFFF;">
<tr>
<td style="background-color: #e3effb; border-bottom-width: 4px; border-bottom: 12px solid #e3effb; border-top: 3px solid #b9d8f4;"></td>
</tr>
</table>
</body>
</html>