J'envoie un e-mail depuis MS Outlook (2013) et cela fonctionne parfaitement, mais dans l'application GMail pour Android (cela arrive aussi pour iOS), il y a un espace entre les lignes (lignes).
Comme vous le savez probablement sachez que MS Outlook modifie le HTML lors de l'envoi de l'e-mail (vous pouvez voir le HTML envoyé en enregistrant simplement l'e-mail au format HTML).
Par souci de simplicité, j'ai créé un modèle HTML simple pour que vous puissiez m'aider pour repérer le problème ici.
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
J'ai essayé ce qui suit sans succès jusqu'à présent:
line-height: 0 à l'élément , puis ma line-height personnalisée au Élément
. C'est le plus proche que je puisse obtenir, mais ce n'est pas affiché dans MS Outlook car nous devons utiliser des unités. D'un autre côté, si nous utilisons des unités (c'est-à-dire 0px), nous avons le même problème lors de la réception de l'e-mail dans l'application.
- Ajout d'une
largeur minimale au tableau et aux cellules du tableau.
- Ajout des attributs cellspacing et cellpadding au tableau, mais il n'est pas nécessaire de le faire car MS Outlook les ajoute.
Rien ne fonctionne pour moi.
Je vais ajouter un fond rouge à l'élément
pour que vous puissiez voir ce qui se passe ici. Voici comment l'e-mail est rendu dans MS Outlook:
et voici comment est rendu dans l'application Gmail:
Vous pouvez voir l'écart ajouté par Gmail. Peut-être que le texte est trop long mais ce n'est pas grave, je voulais juste entrer quelque chose de descriptif.
Je continuerai d'essayer jusqu'à ce qu'il soit résolu. Si quelqu'un pouvait m'aider, je l'apprécierais vraiment.
MODIFIER: Je vais coller le HTML traité généré par chaque client (à partir du modèle HTML ci-dessus) afin de faciliter la détection du problème. Je vais coller uniquement la sortie de la cellule du tableau:
Ceci est le HTML envoyé par MS Outlook :
.msg-8292648110214437287 p {
margin-right: 0cm;
margin-left: 0cm;
font-size: 12.0pt;
font-family: "Times New Roman",serif;
}
Comme vous pouvez le constater, MS Outlook ajoute un élément
Notez également que MS Outlook a supprimé la marge style = ": 0; que nous avions en ligne dans le code> mais la classe MsoNormal évite les marges du haut et du bas afin que MS Outlook n'ajoute pas de lacunes ici.
Voici comment Gmail (Android) traite le HTML reçu de MS Outlook
<tr>
<td style="padding:0cm 0cm 0cm 0cm">
<p class="MsoNormal"><span style="font-size:13.5pt;font-family:"Times New Roman",serif;color:black">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS
OUTLOOK<u></u><u></u></span></p>
</td>
</tr>
Et ce style est appliqué à l'élément
<tr>
<td style="padding:0in 0in 0in 0in">
<p class="MsoNormal"><span style="font-size:13.5pt;font-family:"Times New Roman",serif;
color:black">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING
FROM MS OUTLOOK</span></p>
</td>
</tr>
msg-8292648110214437287 semble être une classe générée automatiquement par Gmail. Comme vous pouvez le voir, n'applique que la marge à gauche et à droite, mais elle ne s'applique pas au haut et au bas.
Les margin-top et margin-bottom sont en cours d'application par défaut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gmail APP issue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table style="border:0px;border-spacing:0px;border-collapse:collapse;">
<tbody>
<tr>
<td>
<p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
</td>
</tr>
<tr>
<td>
<p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Les écarts sont donc ceux de la marge en haut et de la marge en bas.
Ce que j'ai essayé:
- Ajout de
p {margin: 0px! important; } dans la balise
- Ajout de
font-size: 0px à l'élément , (et ajout de l'élément souhaité dans un intervalle entourant le texte) de cette façon nous nous débarrassons du marge mais cela ne fonctionne pas non plus.
- Idem pour la hauteur de ligne, etc.
J'espère que cette modification vous aidera, une certaine expertise en gmail est nécessaire ici. Cela fonctionne dans GMail (Web), cela pourrait être un indice.
Encore une fois, cela prend plus de temps que prévu et j'apprécierais beaucoup votre aide. Merci.
3 Réponses :
Vous avez déjà identifié votre problème, la raison de votre problème et une solution, qui consiste à cesser d'utiliser Outlook pour envoyer des e-mails. Utilisez un service ou un logiciel qui ne modifie pas votre code lorsque vous effectuez un envoi.
Outlook, Gmail et à peu près tous les clients de messagerie changeront votre code lors de son rendu. Outlook supprimera les éléments qui ne fonctionnent pas dans Outlook. La même chose avec Gmail. L'exemple le plus connu de ceci est la façon dont Gmail supprime une feuille lorsqu'elle traverse une valeur CSS incompatible. Vous pouvez utiliser un service comme Putsmail pour tester votre travail afin de voir si le problème vient d'Outlook ou d'un problème de formatage.
Si vous allez continuer à suivre ce chemin de frustration, utilisez au moins un J'utilise cette même structure de table sans faute pour envoyer des e-mails avec succès. Bonne chance. .
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td>
<p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
</td>
<tr>
<td>
<p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
</td>
</tr>
</table>
Salut @gwally, les utilisateurs peuvent utiliser Outloook pour envoyer mes modèles, qui fonctionnent bien sur tous les clients de messagerie (y compris Gmail). Et en parlant de Gmail, le HTML généré par Outlook fonctionne sur Gmail (web) mais pas sur l'application Gmail. Je ne sais pas quels styles sont supprimés car je ne peux pas afficher le code source. Merci pour le lien et pour votre aide :)
Lorsque vous envoyez de Putsmail à l'application Gmail, obtenez-vous le même résultat? Certaines fonctionnalités telles que les requêtes "@media" ne fonctionnent pas dans tous les produits Gmail.
J'obtiens les mêmes résultats, j'ai modifié la question pour coller le code qui est envoyé et le code que l'application Gmail reçoit. Le problème est qu'un élément p est généré lors de l'envoi par Outlook et l'application Gmail (uniquement l'application Gmail) n'applique pas de styles dessus, nous avons donc les marges par défaut ...
C'est le mieux que je puisse obtenir et je suivrai cette approche à moins que quelqu'un ne propose une meilleure solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gmail APP issue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
td p.MsoNormal {margin: 0.1px}
</style>
</head>
<body>
<table style="border:0px;border-spacing:0px;border-collapse:collapse;">
<tbody>
<tr>
<td>
<p class="MsoNormal">TABLE CELL 1</p>
</td>
</tr>
<tr>
<td>
<p class="MsoNormal">TABLE CELL 2</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Ce que nous faisons, c'est supprimer le style en ligne de l'élément p, en ajoutant la classe MsoNormal et en appliquant la marge dans la balise .
MS Outlook prendra cette marge et l'intègrera dans l'élément
Notez que nous définissons une marge de 0,1px , sinon Outlook ne l'inclura pas dans l'élément
N'oubliez pas que certains e-mails les clients ne reconnaissent pas la balise de style et d'autres n'appliquent pas le css des classes, donc nous devrions définir margin: 0,1px dans l'élément p comme style en ligne
Cela fonctionne également pour Outlook 2016, dans le cadre d'une signature HTML personnalisée!
c'était tellement frustrant. Quelque chose d'aussi simple que cela, pourquoi ne peuvent-ils pas le permettre. Merci pour le pansement. Vous pouvez ajouter une hauteur de ligne: 98% pour la compresser encore plus.
J'ai réussi à changer cette situation en changeant la classe MsoNormal
<style>
td p.MsoNormal {margin: -4px !important}
/* ou */
.MsoNormal {
margin: -4px !important;
}
</style>
J'ai déjà entendu dire que les mails HTML sont douloureux. Vous devriez peut-être éviter uniquement la table. Au fait, essayez de remplacer la balise p par div. La balise p a une sorte de saut de ligne inclus, c'est peut-être la raison.
J'utilise des tableaux et des styles en ligne pour la compatibilité des clients de messagerie. Peut-être que nous n'en avons pas besoin dans l'exemple ci-dessus, mais la mise en page que j'utilise est plus complexe et j'ai posté cet exemple pour que vous puissiez voir mon point.
Le remplacement du
ppar undivne résout pas le problème puisque MS Outlook ajoute de toute façon la balisep. J'utilisais une balise span avant et le même résultat. Ce qui est étrange, c'est que seul ce client de messagerie (application Gmail) ajoute le vide, je ne sais pas pourquoi ...Désolé dans ce cas, je ne peux pas vous aider.