Affichage html email

J'ai le document html/css suivant:Affichage html email

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8" /> 
<style> 
body { 
    background-color:white; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
} 

#outterBox { 
    position:relative; 
    width:500px; 
    height:320px; 
    display:flex; 
    justify-content: top; 
    flex-direction:column; 
    background-color:#F0f0f0; 
} 

#innerBox { 
    display:flex; 
    align-self: center; 
    background-color:white; 
    width:90%; 
    height:55%; 
    margin-top:6px; 
    flex-direction:column; 
} 

#headingBox { 
    display:flex; 
    align-self: flex-start; 
    width:100%; 
    background-color:#f0f0f0; 
    overflow: hidden; 
    height:18%; 
    margin-top:6px; 
} 

#headingBox > img { 
    margin-left:-4%; 
    background-color:#f0f0f0; 
} 

#notiBar { 
    display:flex; 
    align-self: flex-start; 
    background-color:#a1a1a1; 
    width:100%; 
    height:42px; 
    justify-content: top; 
    align-items: center; 
} 

#qqq > span { 
    font-size:18px; 
    color:white; 
    margin:16px; 
} 

#nnn { 
    display:flex; 
    align-self: flex-start; 
    width:100%; 
    height:100%; 
    justify-content: top; 
    align-items: left; 
    flex-direction:column; 
} 

#nnn > span { 
    font-size:18px; 
    color:#878787; 
    margin-top:16px; 
    margin-bottom:16px; 
    margin-left:14px; 
} 

#nnn > a { 
    display:flex; 
    background-color:#5683CC; 
    border:none; 
    height:36px; 
    color:white; 
    font-size:14px; 
    padding-left:10px; 
    padding-right:10px; 
    align-self:center; 
    align-items:center; 
    text-decoration:none; 
} 

#footer { 
    display:flex; 
    height:27%; 
    width:90%; 
    align-self: center; 
} 

#footer > span { 
    align-self: flex-end; 
    margin-bottom:12px; 
    color:#878787; 
    font-size:10px; 
} 

#u { 
    text-decoration:none; 
    color:#81a0d3; 
    font-size:10px; 
} 

</style> 
</head> 
<body> 
    <div id="outterBox"> 
     <div id="headingBox"> 
     <img src=""> 
     </div> 
     <div id="innerBox"> 
     <div id="qqq"> 
      <span>New</span> 
     </div> 
     <div id="nnn"> 
      <span><span id="aaa">John</span>, xxxxx</span> 
      <a href="https://www.google.com"><span>Hello</span></a> 
     </div> 
     </div> 
     <div id="footer"> 
     <span> Some footer<a id="u" href="/"> click</a></span> 
     </div> 
    </div> 
</body> 
</html>

j'envoyer l'e-mail de mon serveur avec la commande suivante:

mail -s "$(echo -e "This is Subject\nContent-Type: text/html")" [email protected] < test.html

Le rendu dans le courrier électronique est comment Je le vois quand je l'ouvre dans un navigateur. Je ne sais pas ce que je fais mal ici, c'est que je n'ai pas de javascript. Existe-t-il un moyen spécial de faire fonctionner html dans un e-mail?

Lors du rendu du navigateur:

Quand envoyé au courrier électronique:

Aussi l'image ne montre pas non plus (gauche hors dans le html)

Source

2017-07-21 johhny B

Dans quelle application ouvrez-vous votre courriel? – Huelfe

J'utilise Chrome pour ouvrir gmail –

"Le rendu dans l'email n'est pas ce que je vois quand je l'ouvre dans un navigateur" - En quoi est-ce différent? – Quentin

Vous pouvez essayer cette méthode. Je espère que cela résout votre problème:

echo "<b>HTML Message goes here</b>" | mail -s "$(echo -e "This is the subject\nContent-Type: text/html")" [email protected]

Source

2017-07-21 12:28:06 JohnLeToy

en supposant que c'est pareil que: cat test.html | mail -s "$ (echo -e" Ceci est l'objet \ nContent-Type: text/html ")" [email protected] qui donne le même résultat –

pour l'image tu peux utiliser le convertisseur en ligne en base64 si c'est pratique pour toi. Voici le lien [link] (https://www.base64-image.de/) – JohnLeToy

merci John c'est une bonne idée! Cependant, je ne sais pas pourquoi le formatage css ne fonctionne pas correctement ... Y at-il des problèmes avec l'inclusion de styles? Ou pourrait-il être la boîte de flexion? –

Ce que j'appris au cours de cet exercice:

Ne pas essayer d'utiliser des boîtes flexibles pour marquer vers le haut (au Juillet 2017)
Ne pas essayer et utiliser des images SVG (soit en créant un lien vers un site ou en l'incorporant)

Source

2017-07-22 02:35:23

Affichage html email

Répondre

Questions connexes