12

我正在为 html 中的电子邮件制作模板,它在苹果电子邮件客户端、gmail、hotmail 和 windows 邮件 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">
<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>

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

4

3 回答 3

25

我建议看看www.emailology.org。在为 Outlook 构建电子邮件时,我发现它非常有用。作为 HTML 电子邮件的规则,我纯粹在表格中构建它们并在元素上使用样式。这太可怕了,就像几年前建立糟糕的网站一样,但不幸的是,它似乎是最好的解决方案。

例如,我会更改<p><p style="font-family: Helvetica; font-size: 12px;">等等。像往常一样构建它并设置它的样式,但是当您足够高兴地测试它时,复制所有内联样式。

不过看看电子邮件学。这是一个很好的资源。

于 2012-06-21T12:03:53.667 回答
7

该站点提供了一个很好的表格概述(可以下载 PDF),其中包含哪些 CSS 属性将与哪些电子邮件客户端一起使用、支持哪些 CSS 选择器以及在哪里定义您的 CSS 样式(样式标签、头部样式和内联):

http://www.campaignmonitor.com/css/

这篇文章提供了额外的来源:https ://stackoverflow.com/a/1019166/1143126

于 2013-12-10T13:27:03.577 回答
1

那里有大量的指南可以帮助您解决这个问题,因为 Outlook 对 HTML 来说真的很不稳定,例如它不支持您正在使用的 nested 。

于 2012-06-21T11:57:37.703 回答