Je travaille sur des newsletters pour mon entreprise et nous sommes confrontés à des problèmes avec différents clients de messagerie, par exemple. Gmail, Outlook en ligne, Outlook dans l'application, versions mobiles de ces clients.
Chaque texte qu'il contient est différent. Le problème est également que l'application Outlook ne prend pas correctement en charge Des suggestions sur la façon de rendre le design identique dans la plupart des clients de messagerie avec du code ? Le code actuel est le suivant
et
和
。所以我必须将其转换为 table 和 spans . Je dois donc le convertir en table et spans.
<div style="background-color: white; margin-right: 9px; margin-left: 9px; padding-bottom:1px; margin-bottom:10px;">
<table style="background-color: white; border-color: black;padding-bottom:1px; margin-bottom:10px;">
<tbody>
<tr>
<td>
<h3 style="color: #000000; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 16px; font-style: normal; line-height: 24px; letter-spacing: normal; text-align: left; display: inline-block;"> Hello, </h3>
<br />
<span style="font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 13px; line-height: 18px; font-style: normal; font-weight: normal; color: #787878;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla turpis magna<br /> cursus sit amet, suscipit a, interdum id, felis. Ut tempus purus at lorem. <br /> Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. <a href="https://blog.inpage.cz/obrazek/2/kitten-jpg/">here</a>.<br /> <br /> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</span>
</td>
</tr>
<tr>
<td><img style="text-align: left; width: 275px; height: 105px; margin: 10px; border-width: 0px; border-style: solid; float: left;" src="https://blog.inpage.cz/obrazek/2/kitten-jpg/" alt="CAD" /></td>
</tr>
<tr>
<td>
<h2 style="color: #f26503; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 24px; line-height: 36px; text-align: center;"><u>here, lorem</u></h2>
</td>
</tr>
</tbody>
</table>
</div>
<span style="line-height: 0.1; padding:1px; margin:10px;">
</span>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Malheureusement, la plupart des éléments en HTML et CSS ne sont pas pris en charge par les fournisseurs de messagerie. Je sais qu'il existe une documentation fiable qui peut vous aider sur ce sujet. Vous pouvez parcourir pour trouver les éléments et CSS pris en charge et modifier votre modèle en conséquence.
https://elasticemail.com/supported-css
https://www.campaignmonitor.com/css/selectors/class/一个>