Проблема рендеринга HTML Outlook | Отлично работает в новой версии Outlook | Но не отображается должным образом в Outloo ⇐ CSS

[Anonymous]

Итак, у меня есть html-код, который отлично работает в новой версии Outlook, но не отображается должным образом в Outlook 365. Я приложил два снимка экрана (один – это реальный дизайн, который хорошо работает в новой версии Outlook), а другой — это фактический результат.
Кто-нибудь может мне помочь. Я думаю, что есть много тегов, которые текущая версия Outlook не поддерживает. Но можем ли мы приблизиться к реальному дизайну?
Фактический дизайн (отлично работает в новой версии Outlook)
Результаты вывода в Outlook 365
ниже приведен используемый код!






body {
font-family: 'Arial', sans-serif;
margin: 0;
background-color: #f4f4f4;
box-sizing: border-box;
height : 100%;
width : 100%;
}
.table-container{
display : table;
width : 100%;
height: 100%;
}
.table-cell{
display: table-cell;
vertical-align: top;
text-align: center;
padding : 5% 0;
}
.container {
padding: 18px;
max-width: 100%;
width: 100%;
background: white;
border-radius: 10px;
border: 2px solid #000;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
box-sizing: border-box;
text-align: center;
position: relative;
}
.header {
background-color: #77cc00;
color: white;
padding: 15px;
font-size: 20px;
font-family: 'Inter', sans-serif;
font-weight: bold;
border-radius: 10px 10px 0 0;
border-bottom: 2px solid #000;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
position: relative;
z-index: 1;
}
.content {
padding: 20px;
background-color: #f9f9f9;
border-radius: 0 0 10px 10px;
border: 2px solid #77cc00;
border-top: none;
text-align: center;
margin-top: -2px;
position: relative;
}
.success-section {
padding: 10px;
padding-top:0px;
padding-bottom:0px;
background-color: #f0f0f0;
margin-bottom: 5px;
text-align: center;
border: 2px solid #000;
border-radius: 10px;
display: inline-block;
}
.icon {
margin: 0;
vertical-align: middle;
}
.success-text {
font-family: 'Inter', sans-serif;
font-weight: 800;
color: #77cc00;
font-size: 24px;
margin: 0; /* Remove margin to reduce gap */
/*display: inline-block;*/
/* vertical-align: middle;*/
}
/*.success-text {
font-family: 'Inter', sans-serif;
font-weight: 800;
color: #f44336;
font-size: 24px;
}*/
.message-box {
font-family: 'Inria Sans', sans-serif;
font-weight: bold;
color: #333;
background-color: #e0e0e0;
padding: 10%;
border-radius: 10px;
margin: 15px 0;
}
.message-text {
margin: 5px 0;
}
.icon {
margin: 6px 0;
}
.footer {
padding-top: 20px;
text-align: left;
font-size: 14px;
font-family: 'Inter', sans-serif;
font-weight: 600;
color: #333;
}
@media (max-width: 600px) {
.container {
margin: 10px;
border-radius: 5px;
}
.header {
font-size: 18px;
padding: 10px;
}
.content p {
font-size: 16px;
margin: 10px 0;
}
.icon {
margin: 15px 0;
}
.success-text {
font-size: 20px;
}
}








Extraction Status (Prod) -- {botName}



SUCCESS

The extraction has completed successfully with the following records
{records_count}
File has been successfully moved to workfiles/input

Regards,

OCS Team










Подробнее здесь: https://stackoverflow.com/questions/791 ... ut-does-no