我很难找到为什么我的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="#">>> 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="#">>> 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="#">>> 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="#">>> 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="#">>> 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="#">>> 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="#">>> 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>
在当前版本中，我对所有图像路径进行了硬编码，并且它们显示正确。
格式化是完全错误的。
答案 0 :(得分：2)
哪个版本的Outlook？ 2007使用Word来呈现HTML电子邮件，并且无法处理浮动或位置，有时无法处理背景图像......以及其他许多内容。我发现生成HTML电子邮件的最好方法是将它写成2000年的网站。基于表格的布局等......