个人中心
gpt4 book ai didi

Outlook 中的 HTML 电子邮件

转载 作者：技术小花猫 更新时间：2023-10-29 12:45:47 25 4
gpt4 key购买 nike

我正在用 html 制作电子邮件模板，它在 apple 电子邮件客户端、gmail、hotmail 和 windows mail 2006 中工作正常。它在 outlook 中不起作用，它拉伸(stretch)开来，字体系列不起作用，因为它拉伸(stretch)它不在页面中心。

这是我的代码；

<!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 吗？

最佳答案

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

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

尽管看看 Emailology。这是一个很好的资源。

关于Outlook 中的 HTML 电子邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11137540/

25 4 0
文章推荐： javascript - 当 # 已经添加到 url 时，如何使用 javascript 或 jquery 将焦点设置在 div 上？
文章推荐： android - 尝试获取 Instagram API 的访问 token 时出现 FileNotFoundException
文章推荐： jquery - 如何使用 jQuery 从数组中的元素中检索值？
文章推荐： android - 如何将自己的 VPN 设置添加到系统 VPN 设置页面？
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com