Outlook 中的 HTML 电子邮件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11137540/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML email in outlook
提问by Jane
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.
我正在为 html 中的电子邮件制作模板，它在苹果电子邮件客户端、gmail、hotmail 和 windows mail 2006 中工作正常。它在 Outlook 中不起作用，它会伸展，字体系列不起作用，因为它会伸展它不在页面中心。
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:[email protected]">[email protected]</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?
有人可以帮我解决这个问题吗？我是否使用了 Outlook 不支持的任何元素？我需要更多的内联 css 吗？
回答by SpaceBeers
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.
我建议看看www.emailology.org。我发现它在为 Outlook 构建电子邮件时非常有用。作为 HTML 电子邮件的规则，我纯粹在表格中构建它们，并在元素上使用样式。这很可怕，就像几年前建立不良网站一样，但不幸的是，它似乎是可用的最佳解决方案。
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.
例如，我会更改<p>为<p style="font-family: Helvetica; font-size: 12px;">等等。像往常一样构建它并设置它的样式，但是当您很高兴测试它时，复制所有样式内联。
Have a look at Emailology though. It's a great resource.
看看电子邮件学。这是一个很好的资源。
回答by RobertG
This site provides a nice table overview (PDF download possible) of which CSS attributes will work with which email clients, what CSS selectors are supported, and where to define your CSS style (style tag vs. head style vs. inline):
该站点提供了一个很好的表格概述（可以下载 PDF），其中介绍了哪些 CSS 属性适用于哪些电子邮件客户端、支持哪些 CSS 选择器以及在哪里定义您的 CSS 样式（样式标记、头部样式与内联）：
http://www.campaignmonitor.com/css/
http://www.campaignmonitor.com/css/
This post provides additional sources: https://stackoverflow.com/a/1019166/1143126
这篇文章提供了额外的来源：https: //stackoverflow.com/a/1019166/1143126
回答by Stuart
there are a huge number of guides out there that will help you with this as outlook is realy flaky with HTML, for example it dosent support nested 's which you are using.
有大量指南可以帮助您解决这个问题，因为 Outlook 对 HTML 非常脆弱，例如它不支持您正在使用的嵌套的。
