Outlook.com中的HTML电子邮件

Question

使用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代码的情况下使其正常工作？

Answer 1

电子邮件根本无法原谅。 每个浏览器，每个客户端都可以显示不同的内容。 微软在提供期望方面绝对是最糟糕的。 最好的选择是使用以下工具尽可能内联样式： http : //foundation.zurb.com/emails/inliner.html

对于远离哪些元素/属性，这也是一个很好的资源： https : //www.campaignmonitor.com/css/

另外，请查看有关Acid的电子邮件。 我不确定它们是否是fremium，但您可以在每个浏览器/客户端/设备等中看到电子邮件的外观...

祝好运。

Answer 2

尝试在其上使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 3

johhny B，这是可以挽救的，但是正如您现在所知道的，Outlook不能与HTML 5，CSS 3，div或darn一起使用。

您需要做的最大的事情是内联css值。 Outlook忽略样式表。 它将忽略诸如#msgContent > span类的任何CSS。

这是您的电子邮件，几乎没有内联的值可以稍微整理一下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>