Outlook 中的 HTML 电子邮件 [英] HTML email in outlook

查看：34
本文介绍了Outlook 中的 HTML 电子邮件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为 html 中的电子邮件制作模板，它在苹果电子邮件客户端、gmail、hotmail 和 windows mail 2006 中运行良好.它在 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"><头><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>无标题文档</title><style type="text/css">身体 {边距:0；填充:0；宽度:100%！重要；溢出-y:隐藏；背景色:#ffffff；-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;字体系列:Helvetica；垂直对齐:顶部；边框间距:0px；}ul, ol, dl {填充:0；边距:0；}h1, h2, h3, h4, h5, h6, p {边距顶部:0；填充右:0px；填充左:0px；}一个 img {边界:无；}一条链接 {颜色:#42413C；文字装饰:下划线；}一个:访问过{颜色:#6E6C64；文字装饰:下划线；}a:hover, a:active, a:focus {文字装饰:无；}.容器 {宽度:600px；背景:#FFF；边距:0 自动；}.内容 {填充:0px；左边距:10px；边界:无；背景颜色:#E9E9E9；行高:16px；字体大小:14px；宽度:590px；}.页脚{填充:0px 0;背景:#000000；文本对齐:居中；白颜色;字体大小:12px；底边距:10px；高度:45px；宽度:600px；}.actie {背景颜色:#69696D；}.icons {字体大小:12px；}.接触 {文本对齐:居中；}.桌子 {边框间距:0px；}.联系{白颜色;}.设备 {背景色:#2f2f31；高度:253px；边框:0；}.header {背景色:#2f2f31；高度:87px；边框:0；}p{字体颜色:黑色；}</style></head><身体><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 class="devices" background-color="#2f2f31" height="220px" border="0"><img src="http://mediabunker.com/newsletters/newsletter_201206/devices2.png"/></div><div class="内容"><表格宽度=590"边框=0"><tr><td width="55%"><h3><strong>您经常遇到的应用程序吗?</strong></h3><p>Het gebruik van 应用程序，oftewel 应用程序，正在蓬勃发展！Steeds meer merken en bedrijven zien het gemak van een app in. Het 是 de Ideale optie voor het versterken van uw merk, zowel extern als intern，het opzetten van een geheel nieuw 产品.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ïinteresseerd zijn in onze service, van op maat gemaakte applicties en backend oplossingen, neem dan gerust contact met ons op.U Bent van harte welkom voor een kop koffie bijons in de Suikersilo's, tijdens een verkennend gesprek of een Demonstratie van de mogelijkheden van apps voor mobiel, tablet, 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>无论什么设备.<br/>我们在本地构建.</h3></td></tr><tr><td><img src="http://mediabunker.com/newsletters/newsletter_201206/apple.png"/></td><td width="199"><div align="center">苹果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">微软和诺基亚一起<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;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/newsletter_201206/actie2.png"/></a></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">电话 +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><img src="http://mediabunker.com/newsletters/newsletter_201206/footer.png" width="600"/></div></div>

有人可以帮我解决这个问题吗?我是否使用了 Outlook 不支持的任何元素?我需要更多的内联 css 吗?

解决方案

我建议看看 www.emailology.组织.我发现它在为 Outlook 构建电子邮件时非常有用.作为 HTML 电子邮件的规则，我纯粹在表格中构建它们并在元素上使用样式.这很可怕，就像多年前建立不良网站一样，但不幸的是，这似乎是可用的最佳解决方案.

例如，我将 <p> 更改为 <p style="font-family: Helvetica; font-size: 12px;">等等.像平常一样构建它并设置它的样式，但是当您很高兴测试它时，复制所有样式内联.

尽管看看电子邮件学.这是一个很好的资源.

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 &amp; 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.

这篇关于Outlook 中的 HTML 电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆