HTML电子邮件无效：/
[英]HTML email doesn't work :/
问题描述
I got a problem with my HTML newsletter. 
我的HTML时事通讯有问题。 When you run the code as an Internet website, all's clear. 当您将代码作为Internet网站运行时，一切都很清楚。 But when I import it on Outlook, all the CSS doesn't count. 但是，当我将其导入Outlook时，所有CSS都不计在内。 Is it normal? 正常吗 Thank's 谢谢
HTML & CSS here HTML 和CSS在这里
<style> body { max-width: 600px; background-color: rgb(67, 153, 186); } h1 { color: rgb(214, 196, 0); } h2 { font-weight: bold; } * { font-family: "Univers LT 45", sans-serif; } p { background-color: rgba(255, 255, 255, 0.2) } #NewsletterPRONA { flex-direction: column; rgb(67, 153, 186); } #news {} #yellow { background-color: rgb(214, 196, 0); width: 100%; margin-bottom: auto; overflow: hidden; } #yellowL { float: left; width: 50%; } #yellowR { position: relative; float: right; width: 50%; } #h1v2 { color: rgb(67, 153, 186); background-color: rgb(214, 196, 0); } #personnel { flex-direction: column; } #qsum { background-color: rgb(214, 196, 0); overflow: hidden; } #divers { overflow: hidden; } </style>
<body id="NewsletterPRONA"> <div id="blue" style="background-color:rgb(67, 153, 186);"> <div id="news"> <h1>News</h1> <p></p> </div> <div id="yellow"> <h1 id="h1v2">Geschäftsverlauf / Déroulement des affaires</h1> <div id="yellowL"> <h1 id="h1v2">Offerten</h1> <p> </p> <h1 id="h1v2">Projekte</h1> <p> </p> </div> <div id="yellowR"> <h1 id="h1v2">Offres</h1> <h2>Bruit</h2> <p> </p> <h2>Sols</h2> <p> </p> <h2>Déchets</h2> <p> </p> <h2>EIE</h2> <p> </p> <h2>Physique et acoustique du bâtiment</h2> <p> </p> <h1 id="h1v2">Projets</h1> <h2>Bruit</h2> <p> </p> </div> </div> <div id="personnel"> <h1>Personal / Personnel</h1> <h2>Neueinstellungen / Nouveaux engagements</h2> <p></p> <h2>Austritte / Départs</h2> <p></p> <h2>Jubiläum / Jubilé</h2> <p></p> <h2>Geburtstage / Anniversaires</h2> <p></p> </div> <div id="qsum"> <h1 style="color: rgb(67, 153, 186);">QSUM/MQSE</h1> <div id="yellowL"> <p></p> </div> <div id="yellowR"> <p></p> </div> </div> <div id="divers"> <h1>Diverses / Divers</h1> <div id="yellowL"> <p></p> </div> <div id="yellowR"> <p></p> </div> </div> </div> </body>
1 个解决方案
解决方案1
2 已采纳 2016-08-08 18:18:52
Outlook doesn't support background opacity . Outlook不支持背景不透明 。
The code you supplied works as a website (as you said), but unfortunately will fall apart in most email clients (not just Outlook). 您提供的代码可作为网站使用（如您所说），但是不幸的是，在大多数电子邮件客户端（不仅仅是Outlook）中，这些代码会分崩离析。 Emails need to use <table> s for layout instead of <div> s. 电子邮件需要使用<table>而不是<div>进行布局。 Flexbox won't work in emails, either. Flexbox也无法在电子邮件中使用。
Email code looks more like this: 电子邮件代码看起来像这样：
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="vertical-align: top;background: #aaaaaa;">
<span style="color: #333333;">text</span>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="vertical-align: top;">
<img src="full path to image" alt="alt text" width="50" height="50">
</td>
</tr>
</table>
If you rebuild your email by replacing <div> s with <table> s while using CSS that email clients support , this should solve your display issues in Outlook and everywhere else. 如果您在使用电子邮件客户端支持的CSS时通过将<div>替换为<table>来重建电子邮件，这应该可以解决Outlook和其他地方的显示问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.