Nessun stilo CSS visto in e-mail

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

Domanda

Non riesco a vedere gli stili CSS quando la seguente pagina HTML viene inviata via email (Yahoo / Gmail) utilizzando Mutt.i vedi solo un tavolo semplice. Maggio che ricevo lo stile desiderato quando lo ha visto in un browser.Perchè è così ?Mi manca qualcosa? 

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>
.

È stato utile?

Soluzione

HTML-Email è molto limitato al punto in cui anche tag Div e P non agiscono sempre come previsto.Cercando di creare i tuoi tag ti sta semplicemente chiedendo problemi.

Le tue due cellule da tavolo dovrebbero sembrare così: 

<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>
.

Oltre a inlineare sempre il tuo CSS, è necessario utilizzare il colore esagonale a 6 cifre per il massimo supporto client di posta elettronica.Devi anche ri-dichiarare i tuoi stili dei font in ogni cella da tavolo.Sfortunatamente così com'è, purtroppo questo è ciò che è necessario in HTML-e-mail.

Non dimenticare anche la pila di carattere, come stai attualmente assumendo che il lettore abbia installato Helvetica.

Altri suggerimenti

Il modo per includere CSS in un'e-mail HTML è utilizzare gli stili in linea. 

    <!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>
.

Rif: http://www.htmlgoodies.com/beyond/css/Articolo.php / 3679231

Potrebbe essere necessario dare un'occhiata a questo tutorial Guida introduttiva con le e-mail HTML su tutsplus Questo è un vecchio tutorial ma davvero utile.

buona fortuna.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top