为了使用 html 创建一个漂亮的电子邮件，我遇到了很多麻烦。
它适用于 gmail 和 yahoo。我只是想在 hotmail 和 outlook.com 上进行测试，它只是将整个电子邮件显示为 HTML 代码？!
html 格式正确，如下所示:
<!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;
background-color:#F0f0f0;
padding:10px;
}
#innerBox {
background-color:white;
width:90%;
height:55%;
margin-top:6px;
margin: 0 auto;
margin-top:24px;
position:relative;
}
#headingBox {
width:100%;
height:18%;
background-color:#f0f0f0;
overflow: hidden;
}
#notiBar {
background-color:#a1a1a1;
width:100%;
height:42px;
line-height:42px;
}
#notiBar > span {
font-size:18px;
color:white;
margin-left:16px;
}
#notiContent {
width:100%;
height:100%;
position:relative;
}
#notiContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:14px;
}
#msgContent {
height:30px;
line-height:30px;
padding:10px;
}
#msgContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:4px;
}
#linkContent {
margin-top:2%;
height:50px;
width:100%;
position:relative;
text-align:center;
}
#siteButton {
display:inline-block;
background-color:#5683CC;
border:none;
color:white;
font-size:16px;
padding-left:10px;
padding-right:10px;
text-decoration:none;
height:36px;
width:40%;
line-height:36px;
text-align:center;
}
#footer {
height:27%;
width:90%;
padding-top:10%;
}
#footer > span {
color:#878787;
font-size:10px;
}
#unsubscribe {
text-decoration:none;
color:#81a0d3;
font-size:10px;
}
</style>
</head>
<body>
<div id="outterBox">
<div id="headingBox">
<img src="image location" alt="xx" title="xx" style="display:block"/>
</div>
<div id="innerBox">
<div id="notiContent">
<div id="msgContent">
<span><span id="userName"></span>, new message</span>
</div>
<div id="linkContent">
<a id="siteButton" href="website">Check msgs now</a>
</div>
</div>
</div>
<div id="footer">
<span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span>
</div>
</div>
</body>
</html>
有没有什么技巧可以使它工作而不必为 Microsoft 大幅更改我的代码？
最佳答案
电子邮件一点也不宽容。每个浏览器，每个客户端都可以显示不同的东西。微软在渲染预期方面绝对是最差的。最好的办法是尽可能多地内联样式，使用以下工具:http://foundation.zurb.com/emails/inliner.html
这也是一个很好的资源，关于哪些元素/属性要远离:https://www.campaignmonitor.com/css/
此外，请查看有关 Acid 的电子邮件。我不确定它们是否免费，但您可以看到电子邮件在每个浏览器/客户端/设备等中的外观...
祝你好运。
关于outlook.com 中的 HTML 电子邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45264229/