我的 HTML 时事通讯有问题。 当您将代码作为 Internet 网站运行时，一切就都清楚了。 但是当我在 Outlook 上导入它时，所有的 CSS 都不算数。 正常吗？谢谢
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>最佳答案
Outlook doesn't support background opacity .
您提供的代码可以用作网站(如您所说)，但不幸的是，在大多数电子邮件客户端(不仅仅是 Outlook)中会崩溃。邮箱需要使用<table> s 用于布局而不是 <div>秒。 Flexbox也不适用于电子邮件。
电子邮件代码看起来更像这样:
<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>
如果您通过替换 <div> 来重建电子邮件与 <table>使用 CSS that email clients support 时，这应该可以解决您在 Outlook 和其他任何地方的显示问题。
关于HTML 电子邮件不起作用 :/，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38829504/