Aucun style CSS vu dans le courrier électronique

StackOverflow https://stackoverflow.com//questions/20007948

Question

Je suis incapable de voir des styles CSS lorsque la page HTML suivante est envoyée par courrier électronique (Yahoo / gmail) à l'aide de MutT.Je voit simplement une table simple.Mais je reçois le style souhaité lors de la visualisée dans un navigateur.Pourquoi est-ce si ?Est-ce que je manque quelque chose? 

mutt -e "set content_type=text/html" me@mail.com -s "Test" < Test.html

test.html 

<!DOCTYPE html>
<html>
<head>
<style>
rd{ color: red; }
gn{ color: green; }
body { background-color:#E0E0E0; font-family: helvetica;font-size: 15px;}
</style>
</head>
<body>
<table border="1" align ="left">
<tr><th>No.</th><th>Item</th></tr>
<tr><td>1</td><td><gn>abc</gn></td></tr>
<tr><td>2</td><td><rd>ghi</rd></td></tr>
</table>
</body>
</html>

Était-ce utile?

La solution

HTML-E-mail est très limité au point où même Div et P balises ne jouent pas toujours comme prévu.Essayer de créer vos propres tags consiste simplement à demander des ennuis.

Vos deux cellules de table doivent ressembler à ceci à la place: 

<tr><td>1</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#007700;">abc</td></tr>
<tr><td>2</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#770000;">ghi</td></tr>

En plus de toujours inliquer votre CSS, vous devez utiliser la couleur hexagonale à 6 chiffres pour un support client de messagerie maximum.Vous devez également refluer vos styles de police dans chaque cellule de table.Redondant tel qu'il est, malheureusement c'est ce qui est nécessaire dans HTML-E-mail.

N'oubliez pas la pile de polices également, car vous supposez actuellement que le lecteur ait Helvetica installé.

Autres conseils

Le moyen d'inclure CSS dans un courrier électronique HTML consiste à utiliser des styles en ligne. 

    <!DOCTYPE html>
    <html>
    <body style='background-color:#E0E0E0; font-family: helvetica;font-size: 15px;'>
        <table border="1" align="left" style="color:red;">
            <tr><th>No.</th><th>Item</th></tr>
            <tr><td>1</td><td><gn>abc</gn></td></tr>
        </table>
    </body>
    </html>

ref: http://www.htmlgoodies.com/beyond/css/Article.php / 3679231

Vous devrez peut-être consulter ce tutoriel Mise en route avec les e-mails HTML sur TUTSPLUS C'est un ancien tutoriel mais vraiment utile.

Bonne chance.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top