展望中的HTML电子邮件 [英] HTML email in outlook
本文介绍了展望中的HTML电子邮件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码;
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< meta name =viewportcontent =initial-scale = 0.5>
< meta name =format-detectioncontent =telephone = yes>
< title> Untitled Document< / title>
< style type =text / css>
body {
margin：0;
padding：0;
width：100％！important;
overflow-y：hidden;
background-color：#ffffff;
-webkit-text-size-adjust：100％;
-ms-text-size-adjust：100％;
font-family：Helvetica;
vertical-align：top;
border-spacing：0px;
}
ul，ol，dl {
padding：0;
margin：0;
}
h1，h2，h3，h4，h5，h6，p {
margin-top：0;
padding-right：0px;
padding-left：0px;
}
a img {
border：none;
}
a：link {
color：＃42413C;
文字装饰：下划线
}
a：visited {
color：＃6E6C64;
文字装饰：下划线
}
a：hover，a：active，a：focus {
text-decoration：none;
}
.container {
width：600px;
background：#FFF;
margin：0 auto;
}
.content {
padding：0px;
padding-left：10px;
border：none;
background-color：＃E9E9E9;
line-height：16px;
font-size：14px;
width：590px;
}
.footer {
padding：0px 0;
背景：＃000000;
text-align：center;
颜色：白色;
font-size：12px;
margin-bottom：10px;
height：45px;
width：600px;
}
.actie {
background-color：＃69696D;
}
.icons {
font-size：12px;
}
.contact {
text-align：center;
}
.table {
border-spacing：0px;
}
.contact a {
color：white;
}
.devices {
background-color：＃2f2f31;
height：253px;
border：0;
}
.header {
background-color：＃2f2f31;
height：87px;
border：0;
}
p {
font-color：black;
}
< / style>< / head>
< body>
< div class =containerwidth =600pxheight =900px>
< div class =header>< img src =http://mediabunker.com/newsletters/newsletter_201206/logo.pngwidth =600height =87px/>
< / div>
< div class =devicesbackground-color =＃2f2f31height =220pxborder =0>< img src =http://mediabunker.com/newsletters/newsletter_201206/ devices2.png/>< / div>
< div class =content>
< table width =590border =0>
< tr>
< td width =55％>< h3>< strong> Werkt u al met apps？< / strong>< / h3>
< p> Het gebruik van应用程序，宝石应用程序，是namelijk蓬勃发展！马克思恩格尔·贝恩里恩·詹恩·赫特·吉格斯·范恩恩应用程序。Het is de ideale optie voor het versterken van uw merk，zowel extern als intern，of het opzetten van een geheel nieuw product。 Ook de hugee groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven。< / p>
< p> Mocht ugeïnteresseerdzijn in onze service，van op maat gemaakte applicaties en backend oplossenen，neem dan gerust contact met ons op。呃，呃，呃，呃，呃，呃，呃，呃，呃，呃，呃，呃，呃，呃，呃，呃，
< p> Alvast bedankt en hopelijk tot ziens。< / p>< / td>
< td width =45％valign =top>
< table height =autoborder =0cellpadding =5pxclass =iconsmargin-top =0>
< tr>
< td colspan =2>< h3>无论什么设备。< br />
我们本机构建。< / h3>< / td>
< / tr>
< tr>
< td>< img src =http://mediabunker.com/newsletters/newsletter_201206/apple.png/>< / td>
< td width =199>< div align =center> Apple iOS是操作的< br />
系统为< br />
iPhone，iPad和iPod touch。< / div>< / td>
< / tr>
< tr>
< td>< img src =http://mediabunker.com/newsletters/newsletter_201206/android.png/>< / td>
< td>< div align =center>与Google合作伙伴，< br />
HTC和摩托罗拉，Android是< br />
是增长最快的移动操作系统。< / div>< / td>
< / tr>
< tr>
< td>< img src =http://mediabunker.com/newsletters/newsletter_201206/windows.png/>< / td>
< td>< div align =center>一起Microsoft和Nokia< br />
支持常规用户< br />
与Windows Phone。< / div>< / td>
< / tr>
< tr>
< td>< img src =http://mediabunker.com/newsletters/newsletter_201206/html5.png/>< / td>
< td>< div align =center>寻找其他平台< br />
喜欢黑莓，三星< br />
Bada或HTML5& amp; amp; amp; CSS3？< br />
我们可以构建它！< / div>< / td>
< / tr>
< / table>< / td>
< / tr>
< / table>< / div>
< div class =actie>
< div align =center>< a href =http://www.mediabunker.com/products>< img src =http://mediabunker.com/newsletters/ /letter" /
< / div>
< div class =footerbackground-color =＃000000halign =centerheight =40px>
< table class =contactborder =0HALIGN =center>
< tr align =center>
< td align =centerwidth =189px>< font color =white> Suikersilo-West 23< br />
1165 MP Halfweg< / font>< / td>
< td align =centerwidth =189px>< a href =tel：0031238200140>电话+31 23 820 0140< / a>< br& < a href =mailto：info@mediabunker.com> info@mediabunker.com< / a>< / td>
< td align =centerwidth =189px>< a href =http://mediabunker.com> www.mediabunker.com< / a>< br> < a href =http://twitter.com/mediabunker> twitter.com/mediabunker< / a>< / td>
< / tr>
< / table>
< img src =http://mediabunker.com/newsletters/newsletter_201206/footer.pngwidth =600/>< / div>< / div>
< / body>
< / html>
有人可以帮助我解决这个问题吗？我使用了outlook不支持的任何元素吗？我需要更多内联css吗？
解决方案
我建议看一下 www.emailology.org 。在构建Outlook的电子邮件时，我发现它非常有用。作为HTML电子邮件的规则，我们纯粹以表格和元素的样式来构建它们。这是可怕的，像几年前建立不良网站，但不幸的是，它似乎是最好的解决方案。
例如，我会更改 p> to < p style =font-family：Helvetica; font-size：12px;> 等等。建立它，并按照您正常的方式进行风格，但是当您足够高兴测试时，可以将所有样式内联。
看看Emailology。这是一个很好的资源。
I'm making a template for email in html, it works fine in apple email clients, gmail, hotmail and windows mail 2006. It does not work in outlook, it stretches out, the font family is not working and because it stretches out it does not center on the page.
This is my code;
<!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" />
<meta name="viewport" content="initial-scale=0.5">
<meta name="format-detection" content="telephone=yes">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100% !important;
overflow-y: hidden;
background-color: #ffffff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: Helvetica;
vertical-align: top;
border-spacing: 0px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 0px;
padding-left: 0px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 600px;
background: #FFF;
margin: 0 auto;
}
.content {
padding: 0px;
padding-left: 10px;
border: none;
background-color: #E9E9E9;
line-height: 16px;
font-size: 14px;
width: 590px;
}
.footer {
padding: 0px 0;
background: #000000;
text-align: center;
color: white;
font-size: 12px;
margin-bottom: 10px;
height: 45px;
width: 600px;
}
.actie {
background-color: #69696D;
}
.icons {
font-size: 12px;
}
.contact {
text-align: center;
}
.table {
border-spacing: 0px;
}
.contact a {
color: white;
}
.devices {
background-color: #2f2f31;
height: 253px;
border: 0;
}
.header {
background-color: #2f2f31;
height: 87px;
border: 0;
}
p {
font-color: black;
}
</style></head>
<body>
<div class="container" width="600px" height="900px">
<div class="header"><img src="http://mediabunker.com/newsletters/newsletter_201206/logo.png" width="600" height="87px" />
</div>
<div class="devices" background-color="#2f2f31" height="220px" border="0"><img src="http://mediabunker.com/newsletters/newsletter_201206/devices2.png" /></div>
<div class="content">
<table width="590" border="0">
<tr>
<td width="55%"><h3><strong>Werkt u al met apps?</strong></h3>
<p>Het gebruik van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>
<p>Mocht u geïnteresseerd zijn in onze service, van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op. U bent van harte welkom voor een kop koffie bij ons in de Suikersilo's, tijdens een verkennend gesprek of een demonstratie van de mogelijkheden van apps voor mobiel, tablets, tv en het web.</p>
<p>Alvast bedankt en hopelijk tot ziens.</p></td>
<td width="45%" valign="top">
<table height="auto" border="0" cellpadding="5px" class="icons" margin-top="0">
<tr>
<td colspan="2"><h3>No matter what device.<br />
We build natively.</h3></td>
</tr>
<tr>
<td><img src="http://mediabunker.com/newsletters/newsletter_201206/apple.png"/></td>
<td width="199"><div align="center">Apple iOS is the operating<br />
system that powers the <br />
iPhone, iPad and iPod touch.</div></td>
</tr>
<tr>
<td><img src="http://mediabunker.com/newsletters/newsletter_201206/android.png" /></td>
<td><div align="center">With partners like Google,<br />
HTC and Motorola, Android is<br />
the fastest growing mobile OS.</div></td>
</tr>
<tr>
<td><img src="http://mediabunker.com/newsletters/newsletter_201206/windows.png" /></td>
<td><div align="center">Together Microsoft and Nokia<br />
support conventional users <br />
with Windows Phone.</div></td>
</tr>
<tr>
<td><img src="http://mediabunker.com/newsletters/newsletter_201206/html5.png" /></td>
<td><div align="center">Looking for other platforms<br />
like BlackBerry, Samsung <br />
Bada or HTML5 & CSS3?<br />
We can build it!</div></td>
</tr>
</table></td>
</tr>
</table></div>
<div class="actie">
<div align="center"><a href="http://www.mediabunker.com/products"><img src="http://mediabunker.com/newsletters/newsletter_201206/actie2.png" /></a></div>
</div>
<div class="footer" background-color="#000000" halign="center" height="40px">
<table class="contact" border="0" HALIGN="center">
<tr align="center">
<td align="center" width="189px"><font color="white">Suikersilo-West 23 <br />
1165 MP Halfweg</font></td>
<td align="center" width="189px"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:info@mediabunker.com">info@mediabunker.com</a></td>
<td align="center" width="189px"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></td>
</tr>
</table>
<img src="http://mediabunker.com/newsletters/newsletter_201206/footer.png" width="600"/></div></div>
</body>
</html>
Can someone help me with fixing this for outlook? Have I used any elements that are not supported by outlook? Do I need more inline css?
解决方案
I'd suggest having a look at www.emailology.org. I've found it very useful when building emails for Outlook. As a rule for HTML emails, I build them purely in tables and with styles on the elements. It's horrible and like building bad websites years ago but unfortunatly it seems to be the best solution available.
For example, I'd change <p> to <p style="font-family: Helvetica; font-size: 12px;"> and so on. Build it and style it like you would do normally but when you are happy enough to test it copy all the styles inline.
Have a look at Emailology though. It's a great resource.
这篇关于展望中的HTML电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
