MailChimp模板在Outlook中看起来错误,在所有浏览器中都正常

MailChimp模板在Outlook中看起来错误,在所有浏览器中都正常,outlook,mailchimp,Outlook,Mailchimp,我很难找到为什么我的html+css在浏览器和mailchimp预览功能中看起来不错,但在outlook的收件箱中看起来很难看 是否有一些事情在html outlook电子邮件中无法完成 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

我很难找到为什么我的html+css在浏览器和mailchimp预览功能中看起来不错,但在outlook的收件箱中看起来很难看

是否有一些事情在html outlook电子邮件中无法完成

以下是源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scandia Housing</title>

<style type="text/css">

body {
 background:#eeeeee;
 margin:0; padding:0;
}

a {
 color:#2f894d;
 text-decoration:none;
}

h2 {
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:18px;
 color:#2d4760;
 font-weight:lighter;
}

h3 {
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:15px;
 color:#2d4760;
 font-weight:lighter;
}



#headtext {
 font-family:Tahoma, Geneva, sans-serif;
 font-size:10px;
 color:#9aaec2;
 text-align:center;
 width:720px; display:block;
 clear:both; margin:auto;
 margin-bottom:10px;
}

#content {
 display:block;
 margin:auto;
 background:#fff;
 width:720px;
}

#rowbox1 {
 padding:0;
 font-family:Tahoma, Geneva, sans-serif; 
 font-size:11px;
 margin-top:30px;
 width:720px; height:250px;
 display:block;
}

#rowbox2, #rowbox3, #rowbox4 {
 padding:0;
 font-family:Tahoma, Geneva, sans-serif; 
 font-size:11px;
 margin-top:20px;
 width:720px; height:210px;
 display:block;
}

#rowbox1 {
 background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/rowboxbg.png) no-repeat bottom;
}

#a1 img, #c1 img, #d1 img, #e1 img {
 margin-right:10px;
 margin-bottom:10px;
}

#b1 img {
 margin-left:10px;
}

#a1, #b1, #c1, #d1, #e1 {
 color:#606060;
 width:350px; height:240px;
 display:block;
 float:left;
 margin-left:30px;

}

#b1, #c1, #d1, #e1 {
 background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/boxbg.png) bottom;
 width:380px; height:170px;
 padding:10px;
}

#a1 h2, #b1 h3, #c1 h3, #d1 h3, #e1 h3 {
 margin:0; padding:0;
}

#a2 h2, #b2 h3, #c2 h3, #d2 h3, #e2 h3 {
 margin:0; padding:0;
}

#a2, #b2, #c2, #d2, #e2 {
 font-family:Tahoma, Geneva, sans-serif; 
 font-size:11px;
 color:#2d4760;
 width:230px;
 height:190px;
 display:block;
 float:left;
 margin-left:20px;
}

#a2, #b2, #c2, #d2, #e2 {
 background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/line.png) bottom no-repeat ;
}

#a2 {
 background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/listbox.png) no-repeat;
 width:260px; height:220px;
 margin-left:70px;
}

#b1 {
 height:210px;
}

#b2 {
 width:268px; height:210px;
}

#a2 h3 {
 margin:5px 0 0 10px; padding:0;
}

#a2 ul {
 margin:0; padding:0;
 margin:20px 0 0 30px;
}

#a2 h3 {
 color:#fff;
}

#footer {
 text-align:center;
 font-size:10px;
 font-family:Tahoma, Geneva, sans-serif;
 background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/footer.png);
 color:#fff;
 padding:20px;
}

</style>

</head>

<body>

      <div id="headtext"><a href="*|ARCHIVE|*">Hvis du modtager denne email, er du blevet tilmeldt Scandia Housings nyhedsbrev.<br />
      Har du problemer med at få vist dete nyhedsbrev, så klik her og få det vist i din browser.</a></div>

<div id="content"><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/header.png" width="720" height="137" />

            <div id="rowbox1">
              <div id="a1">
              <h2>Velkommen til vores nyhedsbrev </h2>
              <p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/peter.gif" width="119" height="176" align="left" />Lorem ipsum dolor sit amet, consectetur adipisc ing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque  lorem et arcu. Nunc molestie ultrices rutrum. </p>
              <p>Quisque leo tellus, eleifend vel scelerisque rhonc us, viverra a risus. <img style="margin-top:20px;" src="http://www.scandiahousing.com/DND/nyhedsbrev/images/petersign.png" width="112" height="50" /><br />
              </p>
              </div>

              <div id="a2">
                <h3>Nyt fra Scandia Housing </h3>
                <ul>
                  <li>Lejemarkedet om 5 år</li>
                  <li>Regeringen vil lokke udenlandsk talent til Danmark</li>
                  <li>Århus Universitet kommenterer regerings-planerne</li>
                  <li>Fokus på boligen</li>
                  <li>Scandia Housing vokser</li>
                  <li>Travl periode i udsigt</li>
                  <li>Lektor Morten Skak's antagelser</li>
                </ul>
              </div>
        </div>


<div id="rowbox2">
              <div id="b1">
              <h3><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/person1.gif" width="118" height="178" align="right" />Århus Universitet kommenterer <br />
                regeringsplanerne</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
              <p>Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. Quisque leo tellus.</p>
              <p><a href="#">&gt;&gt; Læs yderligere her</a></p>
          </div>

              <div id="b2">
                <img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/pictures.png" width="268" height="210" />
</div>
        </div>

<div id="rowbox3">
              <div id="c1">
              <h3>Fokus på boligen</h3>
              <p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house.gif" width="138" height="83" align="left" />Lorem ipsum dolor sit amet, consectetur      adipiscing elit. Nulla congue, sem quis      eleifend aliquam, orci leo vestibulum      enim, at ullamcorper neque lorem et arcu.      Nunc molestie ultrices rutrum. </p>
              <p> Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus.  Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu.</p>
              <p><a href="#">&gt;&gt; Læs yderligere her</a></p>
          </div>

              <div id="c2">
                <h3>Travl periode i udsigt</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
                <p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
                <p><a href="#">&gt;&gt; Læs yderligere her</a></p>
              </div>
        </div>

        <div id="rowbox3">
              <div id="c1">
              <h3>Scandia Housing vokser</h3>
              <p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house2.gif" width="102" height="136" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
              <p>Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. </p>
              <p><a href="#">&gt;&gt; Læs yderligere her</a></p>
          </div>

          <div id="c2">
            <h3>HR chefens top 5 liste</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
                <p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
                <p><a href="#">&gt;&gt; Læs yderligere her</a></p>
            </div>
        </div>

        <div id="rowbox3">
              <div id="c1">
              <h3>Lektor Morten Skak's antagelser</h3>
              <p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house2.gif" width="102" height="136" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
              <p>Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. </p>
              <p><a href="#">&gt;&gt; Læs yderligere her</a></p>
          </div>

          <div id="c2">
            <h3>Lejemarkedet om 5 år</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
                <p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
                <p><a href="#">&gt;&gt; Læs yderligere her</a></p>
          </div>
  </div>

        <div id="footer">Capella Huset • Indiakaj 1 • 2100 København Ø • Danmark • Telefon: (+45) 33 93 11 81<br />
          Vestergade 19B • 8000 Århus C • Danmark • Telefon: (+45) 72 30 04 88<br />
          Telefax København: (+45) 33 93 14 46 Telefax Århus (+45) 86 27 11 87: • e-mail: scandiahousing@scandiahousing.com<br />
  </div>


</div>


</body>
</html>

斯堪的纳维亚住房
身体{
背景:#eeeeee;
边距:0;填充:0;
}
a{
颜色:#2f894d;
文字装饰:无;
}
氢{
字体系列:佐治亚州,“泰晤士报新罗马”,泰晤士报,衬线;
字号:18px;
颜色:#2d4760;
字体重量:较轻;
}
h3{
字体系列:佐治亚州,“泰晤士报新罗马”,泰晤士报,衬线;
字体大小:15px;
颜色:#2d4760;
字体重量:较轻;
}
#标题文本{
字体系列:塔荷马,日内瓦,无衬线;
字体大小:10px;
颜色:#9AEC2;
文本对齐:居中;
宽度:720px;显示:块;
清除:两者;边距:自动;
边缘底部:10px;
}
#内容{
显示:块;
保证金:自动;
背景:#fff;
宽度:720px;
}
#行框1{
填充:0;
字体系列:塔荷马,日内瓦,无衬线;
字体大小:11px;
边缘顶部:30px;
宽度:720px;高度:250px;
显示:块;
}
#第二排、第三排、第四排{
填充:0;
字体系列:塔荷马,日内瓦,无衬线;
字体大小:11px;
边缘顶部:20px;
宽度:720px;高度:210px;
显示:块;
}
#行框1{
背景:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/rowboxbg.png)无重复底部;
}
#a1类、c1类、d1类、e1类{
右边距:10px;
边缘底部:10px;
}
#b1 img{
左边距:10px;
}
#a1、b1、c1、d1、e1{
颜色:#606060;
宽度:350px;高度:240px;
显示:块;
浮动:左;
左边距:30px;
}
#b1、c1、d1、e1{
背景:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/boxbg.png)底部;
宽度:380px;高度:170px;
填充:10px;
}
#a1 h2、b1 h3、c1 h3、d1 h3、e1 h3{
边距:0;填充:0;
}
#a2 h2、b2 h3、c2 h3、d2 h3、e2 h3{
边距:0;填充:0;
}
#a2、b2、c2、d2、e2{
字体系列:塔荷马,日内瓦,无衬线;
字体大小:11px;
颜色:#2d4760;
宽度:230px;
高度:190px;
显示:块;
浮动:左;
左边距:20px;
}
#a2、b2、c2、d2、e2{
背景:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/line.png)底部无重复;
}
#a2{
背景:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/listbox.png)不重复;
宽度:260px;高度:220px;
左边距:70像素;
}
#b1{
高度:210px;
}
#b2{
宽度:268px;高度:210px;
}
#a2 h3{
边距:5px010px;填充:0;
}
#a2 ul{
边距:0;填充:0;
利润率:20px030px;
}
#a2 h3{
颜色:#fff;
}
#页脚{
文本对齐:居中;
字体大小:10px;
字体系列:塔荷马,日内瓦,无衬线;
背景:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/footer.png);
颜色:#fff;
填充:20px;
}
直到尼赫德斯伯夫
洛雷姆·伊普苏姆·多洛·西特,奉献给精英们。在乌拉姆科佩尔·内克·洛雷姆和阿尔库,有一位名叫纳拉·康格(Nulla congue)、一位名叫埃利芬德·阿利奎姆(eleifend aliquam)、一位名叫奥奇·利奥(orci leo)的前庭设计师。紫红色小分子

利奥·泰卢斯,利弗·维尔·塞勒里斯·朗克·鲁斯,维韦拉·里索斯

纽约市弗拉斯堪的纳维亚住宅酒店
  • 莱杰马凯德酒店
  • 雷杰里根·维勒·洛克·乌登兰茨克天才直到丹麦
  • 奥胡斯大学
  • 福库斯·påboligen
  • 斯堪的纳维亚住房vokser酒店
  • 过渡期
  • 莱克托·莫滕·斯卡的对手
奥胡斯大学科门泰勒分校
雷格林斯普兰 Lorem ipsum dolor sit amet,是一位杰出的献身者

在乌拉姆科佩尔·内克·洛雷姆和阿尔库,有一位名叫纳拉·康格(Nulla congue)、一位名叫埃利芬德·阿利奎姆(eleifend aliquam)、一位名叫奥奇·利奥(orci leo)的前庭设计师。紫红色小分子。奎斯克·利奥·泰勒斯

福库斯·påboligen Lorem ipsum dolor sit amet,是一位杰出的献身者。在乌拉姆科佩尔·内克·洛雷姆和阿尔库,有一位名叫纳拉·康格(Nulla congue)、一位名叫埃利芬德·阿利奎姆(eleifend aliquam)、一位名叫奥奇·利奥(orci leo)的前庭设计师。紫红色小分子

利奥·泰卢斯,伦卡斯,维韦拉·里索斯。在乌拉姆科佩尔·内克·洛雷姆和阿尔库,有一位名叫纳拉·康格(Nulla congue)、一位名叫埃利芬德·阿利奎姆(eleifend aliquam)、一位名叫奥奇·利奥(orci leo)的前庭设计师

过渡期 Lorem ipsum dolor sit amet,是一位杰出的献身者。在乌拉姆科佩尔·内克·洛雷姆和阿尔库,有一位名叫纳拉·康格(Nulla congue)、一位名叫埃利芬德·阿利奎姆(eleifend aliquam)、一位名叫奥奇·利奥(orci leo)的前庭设计师

紫红色小分子。利奥·泰卢斯,伦卡斯

斯堪的纳维亚住房vokser酒店 Lorem ipsum dolor sit amet,是一位杰出的献身者。在乌拉姆科佩尔·内克·洛雷姆和阿尔库,有一位名叫纳拉·康格(Nulla congue)、一位名叫埃利芬德·阿利奎姆(eleifend aliquam)、一位名叫奥奇·利奥(orci leo)的前庭设计师。紫红色小分子

利奥·泰卢斯,伦卡斯,维韦拉·里索斯

HR chefens前五名名单 Lorem ipsum dolor sit amet,是一位杰出的献身者。在乌拉姆科佩尔·内克·洛雷姆和阿尔库,有一位名叫纳拉·康格(Nulla congue)、一位名叫埃利芬德·阿利奎姆(eleifend aliquam)、一位名叫奥奇·利奥(orci leo)的前庭设计师

紫红色小分子。利奥·泰卢斯,伦卡斯

莱克托·莫滕·斯卡的对手 Lorem ipsum dolor sit amet,是一位杰出的献身者。在乌拉的奥奇利奥前庭,一座名为NullaCongue的建筑,一座名为sem quis eleifend aliquam的建筑