web-dev-qa-db-fra.com

Les e-mails au format HTML n'apparaissent pas du tout dans Gmail mais se trouvent dans d'autres clients de messagerie

J'envoie actuellement des e-mails au format html à partir de la fonction mail () de PHP et je les vérifie simplement pour m'assurer qu'ils apparaissent en HTML (mise à part, je suis bien conscient que la mise en forme variera (probablement de manière drastique) d'un client à l'autre) . Ils s'affichent en HTML dans le Apple client de messagerie ainsi que sur mon iPhone. Cependant, Gmail refuse simplement de l'afficher en HTML comme tout. Et par là je ne veux pas dire qu'il est formaté incorrectement, il n'utilise simplement pas HTML, il apparaît.

La partie bizarre est qu'un img d'une balise est en cours de chargement, mais c'est à peu près tout ... est-ce que j'utilise principalement des divs pour la mise en page et c'est trop nouveau pour Gmail ou quelque chose (vs tables)?

En ce qui concerne CSS et ce qui ne va pas, l'affichage de la source brute montre ce qui suit:

<html><head><style>body { background-color: #F2F2F2; font-family: Arial; color: #5C5C5C; font-size: 11pt; } a { color: #46AAFF; text-decoration: none; } #container { width: 750px; margin-right: auto; margin-left: auto; } #header { float: right; padding: 3px; height: 30px; } #header a { color: #666666; margin-right: 10px; } #mainBody { padding: 20px; background-color: #FFF; border: 1px solid #DADADA; border-radius: 3px; } #imageArea { border-top: solid #E8E8E8 1px; margin: 15px; } #singleImageArea { width: 250px; padding: 15px; } #singleImageArea p { float: right; line-height: 30px; width: 130px; margin-top: 20px; } #footer { padding: 10px; color: gray; } #footer p { text-shadow: 0px 2px #FFF; font-size: 10pt; } #footer a { color: #ADADAD; float: right; padding-left: 20px; padding-right: 20px; } #footer img { width: 35px; height: 23px; padding: 10px; float: left; } </style></head><body><div id="container"><div id="header"><a href="http://appname.local/login/">Login</a></d
 iv><div style="clear: both;"></div><div id="mainBody"><h1>Hi Josh Holat!</h1>You've sent a request to <strong>reset</strong> your appname password. Just click the link below <em>(or copy and paste it into your browser)</em> and follow the instructions to set a new password. The link will expire in one hour.<br/><br/><a href="http://appname.local/sb/reset-password/?r=2768af61698fcde9c04f9449351575d6bfe6d720">http://appname.local/sb/reset-password/?r=2768af61698fcde9c04f9449351575d6bfe6d720</a><br/><br/>If you feel this request was submitted in error, don't worry; you can safely ignore this e-mail and your password will not be changed.<br/><br/>Much Love,<br/>Us</div><!-- #mainBody --><div id="footer"><img src="http://appname.local/images/email/footer_sb.png" /><p>&copy; 2011 appname, Inc. All Rights Reserved <a href="http://appname.local/sb/legal/">Legal</a><a href="http://appname.local/sb/contact/">Contact</a><a href="http://s
 tagebloc.local/sb/developers/">Developers</a><a href="http://appname.local/sb/blog/">Blog</a></p></div><!-- #footer --></div><!-- #container --></body></html>

Aussi bien que:

    Delivered-To: [email protected]
Received: by 10.229.40.2 with SMTP id i2cs133298qce;
        Sun, 28 Aug 2011 14:29:08 -0700 (PDT)
Received: by 10.42.152.199 with SMTP id j7mr4419937icw.417.1314566947950;
        Sun, 28 Aug 2011 14:29:07 -0700 (PDT)
Return-Path: <[email protected]>
Received: from joshholat.local (arh2281.urh.uiuc.edu [130.126.70.193])
        by mx.google.com with ESMTP id w3si6800550icz.109.2011.08.28.14.29.06;
        Sun, 28 Aug 2011 14:29:06 -0700 (PDT)
Received-SPF: neutral (google.com: 130.126.70.193 is neither permitted nor denied by best guess record for domain of [email protected]) client-ip=130.126.70.193;
Authentication-Results: mx.google.com; spf=neutral (google.com: 130.126.70.193 is neither permitted nor denied by best guess record for domain of [email protected]) [email protected]
Received: by joshholat.local (Postfix, from userid 70)
    id 775063662E01; Sun, 28 Aug 2011 16:29:06 -0500 (CDT)
To: Josh Holat <[email protected]>
Subject: Password Reset Request
X-PHP-Originating-Script: 501:Email.php
From: appname <[email protected]>
Content-type: text/html
Message-Id: <[email protected]>
Date: Sun, 28 Aug 2011 16:29:06 -0500 (CDT)

Je ne comprends pas pourquoi les clients tiers le montreraient bien, mais Gmail l'ignore simplement?

cssgmailhtml-emailgmail-imap
42
joshholat

Gmail ne prend pas en charge le <style> tag. Vous devez utiliser le CSS en ligne pour que Gmail fonctionne correctement.

Voici une liste de références. http://www.campaignmonitor.com/css/

74
Brombomb

GMail ne prend pas en charge<style> tags et un certain nombre de clients non plus. Pour vous faciliter la vie, vous pouvez utiliser convert pour convertir vos balises de style en CSS en ligne: http://beaker.mailchimp.com/inline-css

31
Hengjie

Je vois que vous utilisez un ID nommé #footer. Il semble que Google ne reconnaisse pas ce nom lorsqu'il traite des e-mails. Notez que dans le code de police vu depuis gmail, tout votre identifiant peut apparaître avec "exc" + idName, sauf #footer. Essayez d'utiliser un nom différent.

2
Didhack

Les réponses ci-dessus sont assez bonnes, je voulais juste ajouter quelques points de plus. Tous les crédits à ce lien :

  1. Gmail ne prend en charge que <style> dans le <head>. Gmail prend en charge les styles intégrés (<style>). Cependant, les styles incorporés ne sont pris en charge que dans l'en-tête de votre document HTML. Les applications Gmail Android et iOS ne prennent pas en charge <style> du tout lors du rendu des e-mails récupérés via des comptes non Google (GANGA).

  2. Gmail supprime l'intégralité de votre <style> bloquer s'il rencontre une erreur.

  3. Gmail n'autorise pas les valeurs de marge CSS négatives.

  4. Gmail ne prend pas en charge les sélecteurs d'attributs et la plupart des pseudo-classes. par exemple. div[class="content"]{ color: red }. Gmail ne prend pas non plus en charge les pseudo-classes comme :checked et :active.

0
Abhishek Divekar