个人中心
gpt4 book ai didi

HTML 电子邮件 – 为什么在使用 Outlook 2010 打开邮件时某些元素不显示？

转载 作者：行者123 更新时间：2023-11-28 01:53:37 26 4
gpt4 key购买 nike

编辑:添加图像。

我正在开发一个 html 电子邮件模板。在经历了大量的血汗和泪水之后，它现在在我们设计的邮件客户端中看起来或多或少是一样的:

enter image description here http://i.imgur.com/aAPcvVv.png

但由于某些原因，Outlook 2010 不会显示副标题和主图像。

enter image description here http://i.imgur.com/OvcDOYX.png

所有图像都存储在同一台服务器上，但只显示 Logo 和 M 图标。

代码如下:

<!DOCTYPE HTML PUBLIC 
  "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Newsletter</title>

  </head>
  <body style="background-color:#f5f5f5; color:#695e4a; font-family: Arial, Helvetica, sans-serif; font-size:12px; margin-top:0px; padding:auto;">

  <style type="text/css">

  a, h1, h2, span, p {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  }



    table, caption, tbody, tfoot, thead, tr, th, td{
      margin: 0;
  padding: 0;
 /* border: 0;
*/  font-size: 100%;
  font: inherit;
    }
    .readmore{
      color:#246877;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 10px;
      letter-spacing: 1px;
      text-decoration: none;
    } 


  </style>
    <table style="padding:none; border:none; border-spacing:0; width:608px" align="center" cellspacing="0">


  <tr>
    <td rowspan="2" style="border-right: 1px solid #e9e9e9; width:3px; "></td>
    <td colspan="2" align="right" style="background-color:#ffffff; font-family: Arial, " HelveticaNeue?,Helvetica,sans-serif;?="">
      <br><a style="margin:50px 25px; font-size:9px; color:#b9b9b9; text-decoration:none" href="">View in browser</a>
      <div style="border-bottom: 1px solid #f6f6f6; margin:5px 25px;"></div>
    </td>
    <td rowspan="2" style="border-left: 1px solid #e9e9e9; width:3px;  "></td>
  </tr>
   <!-- Header with LOGO, date, category, BEFORE content -->
  <tr>

    <td style="width:275px; height: 89px; background-color:#ffffff; padding:10px 0px 10px 25px"><img src="[removed due to non disclosure contract]"></td>
    <td style="text-align:right; width:275px; height: 89px; background-color:#ffffff; color:#6a604c; font-size:9px; text-transform:uppercase; line-height:13px; padding-right:25px;">
      <span style="font-family: Arial, Helvetica, sans-serif;">Monday, July 1st, 2013<br>optional communication category</span>
    </td>
  </tr>
  <!-- Heading Ribbon -->
  <tr>
    <td colspan="4" style="background-color:#dbd1cd; height:50px;  padding-left:29px">
      <table cellspacing="0">
        <tr>
          <td style="width:522px">
            <h1 style="text-transform:uppercase; font-size:22px; font-weight: normal; color:#6a604c; font-family: Arial, Helvetica, sans-serif; padding-top: 17px;
line-height: 0px;">Minor change in membership Rules</h1>
          </td>
           <!-- Optional icon (mandatory, urgent etc) goes in this td -->
          <td style="padding-right:25px; padding-left:25px; width:28px"><img src="[removed due to non disclosure contract]" align="right"></td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- shadow below ribbon -->
  <tr>
    <td colspan="4" style="height:4px;">
<img src="[removed due to non disclosure contract]">
</td>

  </tr>
  <!-- Features,  contained in a nested table -->
  <tr>
    <td style="border-right: 1px solid #e9e9e9; width:3px; "></td>
    <td colspan="2" style="background-color:#fff; border-bottom: 1px solid #e9e9e9;">
      <table style="padding:none; border:none; border-spacing:0;">
        <tr>
          <td colspan="2" style="padding: 10px 25px; font-family: Arial, Helvetica, sans-serif;">
            <h2>Font-family is specified in global styles for each element</h2>
            <img src="[removed due to non disclosure contract]">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie augue ut rutrum interdum. Curabitur varius nisl nec velit dictum feugiat. Nam et augue posuere elit sodales mattis ut nec justo. Etiam auctor rutrum leo in vulputate. Ut eget sem malesuada, consequat ligula id, rutrum lacus. Aenean tempor, magna tincidunt lobortis rutrum, urna arcu mollis diam, nec fermentum arcu mi sed lectus.
          </p>
            <a class="readmore" href="">Read more</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 10px 25px">
            subtitle, image, excerpt, <a>read more</a>
          </td>
          <td style="padding: 10px 25px">
            subtitle, image, excerpt, <a>read more</a>
          </td>
        </tr>


      </table>


    </td>
    <td style="border-left: 1px solid #e9e9e9; width:3px;"></td>
  </tr>
  <!-- optional features -->
</table>
  </body>
</html>

最佳答案

我遇到了类似的问题。

我的 img 标签是这样的

<img src="http://mydomain/images/myimage.jpg" width="600" height="300" alt="my image"   />

它在所有其他电子邮件客户端中运行良好，但对于 Outlook，我需要包含 www 以使其显示:

<img src="http://www.mydomain/images/myimage.jpg" width="600" height="300" alt="my image" />

关于HTML 电子邮件 – 为什么在使用 Outlook 2010 打开邮件时某些元素不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18460471/

26 4 0
文章推荐： javascript - 对数组进行排序而不重绘内容
文章推荐： css - 谷歌地图(街景)嵌入一个div，全屏坏了
文章推荐： Android:Vulkan 层已停止在设备上运行
文章推荐： c++ - 无法找出无限循环背后的原因
行者123
个人简介

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

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