我只是费了很大力气地使用html创建一封漂亮的电子邮件。
它适用于Gmail和雅虎。我只是想在 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>
有没有技巧可以让它工作而不必大幅更改我的微软代码？
电子邮件一点也不宽容。每个浏览器，每个客户端都可以显示不同的东西。微软在渲染期望方面绝对是最差的。最好的办法是尽可能多地内联样式，使用以下工具： http://foundation.zurb.com/emails/inliner.html
这也是一个很好的资源，用于远离哪些元素/属性：https://www.campaignmonitor.com/css/
另外，请查看有关Acid的电子邮件。我不确定它们是否是 fremium，但您可以看到电子邮件在每个浏览器/客户端/设备等中的外观......
祝你好运。
尝试在它上面使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
johhny B，这是可以挽救的，但正如你现在已经发现的那样，Outlook 不适用于 HTML 5、CSS 3、divs 或任何有趣的东西。
您需要做的最重要的事情是内联 css 值。Outlook 忽略样式表。它将忽略任何像 css，#msgContent > span.
这是您的电子邮件，内联的值很少，可以稍微清理Outlook的外观。
祝你好运。
<!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;
border: 1px;
}
#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" style="width: 500px; border: 1px solid;">
<div id="headingBox" style="width: 500px; height:55px; background:#f0f0f0;">
<img src="image location" alt="xx" title="xx" style="display:block"/>
</div>
<div id="innerBox" style="width: 450px;">
<div id="notiContent" style="width: 450px; border: 1px solid;">
<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>