Я пытаюсь создать электронное письмо, которое будет правильно отображаться как в онлайн-версии outlook, так и в gmail.Мне кажется, что он работает нормально в Gmail, но столкнулся со странной проблемой, когда дело доходит до внешнего вида.У меня есть два одинаковых элемента с изображением внутри.Когда я смотрю первый в outlook, он удаляет весь элемент свойств встроенного стиля.Затем он отлично работает на втором с идентичным кодом.(см. скриншот) Я знаю, что между почтовыми клиентами есть странные несоответствия, но я не уверен, что здесь происходит.Если у кого-то есть какие-либо идеи, пожалуйста, дайте мне знать.
Я оглянулся и единственным человеком, у которого, похоже, была похожая проблема, был этот вопрос , но я по крайней мере не нашел ни одногослучайные точки с запятой, как было проблема там.
<table>
<td align="left">
<div id="wrapper" style="width: 600px;background-image: linear-gradient(#15dbff, #6aff90);margin-top: 0px;position: absolute;top: 0px;">
<table height="20px" width="600px">
<tr height="20px" width="600px"></tr>
</table>
<div id="heading" style="width: 452px;height: 131px;background-color: white;margin: auto;margin-top: 20px;border-radius: 25px;">
<img id="headerimg" src="https://kevinuulong.com/images/KLlogocolredcircle.png" style="width: 131px; margin-left: 150px;">
</div>
<div id="body" style="width: 392px;background-color: white;margin: auto;margin-top: 20px;border-radius: 25px;padding: 30px;">
<p id="greeting">Mr. Somebody,</p>
<p id="mainbody">This is some sample text. It should be using the Montserrat font family. <a href="#" style="text-decoration: none;background: linear-gradient(to right, #15dbff, #6aff90);background-repeat: repeat-x;background-size: 100% 2px;background-position: 0 95%;color: #001744;">This</a> is what a link should look like. Any images should be inside a div like this.
<div class="bodyimage" style="width: 392px;height: 200px;overflow: hidden;border-radius: 25px;margin-bottom: 10px;"><img src="https://source.unsplash.com/random/?colors/392x200"></div>
<div class="bodyimage" style="width: 392px;height: 200px;overflow: hidden;border-radius: 25px;margin-bottom: 10px;"><img src="https://source.unsplash.com/random/?colors/392x200"></div>
</p>
<p id="signature">Thanks,<br>Kevin Long</p>
</div>
<div id="contact" style="width: 452px;background-color: white;margin: auto;margin-top: 20px;margin-bottom: 20px;border-radius: 25px;">
<table>
<th style="width: 50%;"> <img id="contactimg" src="https://kevinuulong.com/images/KLlogocolredcircle.png" style="width: 120px;"></th>
<th style="width: 50%;"><a href="https://kevinuulong.com" style="text-decoration: none;background: linear-gradient(to right, #15dbff, #6aff90);background-repeat: repeat-x;background-size: 100% 2px;background-position: 0 95%;color: #001744;">kevinuulong.com</a><br><br>
<a
id="btn" href="mailto:someone@example.com" style="text-decoration: none;background: #5284ff;background-repeat: repeat-x;background-size: 100% 2px;background-position: 0 95%;color: white;padding-left: 50px;padding-right: 50px;padding-top: 10px;padding-bottom: 10px;border-radius: 20px;">Contact Me</a>
</th>
</table>
</div>
<table height="20px" width="600px">
<tr height="20px" width="600px"></tr>
</table>
</div>
</td>
</table>
