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>

有没有一个技巧可以让这个工作，而不必大幅改变我的微软代码？

Answer 1

电子邮件根本不是宽容的。每个浏览器，每个客户端都可以显示不同的东微软在呈现期望方面绝对是最糟糕的。您最好的选择是使用像http://foundation.zurb.com/emails/inliner.html

这样的工具尽可能地内联样式

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

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

祝你好运。

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忽略样式表。它会忽略任何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>

outlook.com中的HTML电子邮件

3 个答案: