4

我已经尝试解决这个问题几个小时了，但我似乎无法找到问题所在。

我有这个必须在低分辨率设备上正确包装的 HTML 电子邮件签名。

这是一个样机，它在大屏幕设备上的外观： 在此处输入图像描述

这是一个在小屏幕设备上应该如何显示的模型： 在此处输入图像描述

这是标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<body>
  <table width="100%">
   <tr>
    <td>

      <!-- TEXT CELL -->
      <table align=left width=160>
       <tr>
        <td>
          <p>
            <span style='font-size:12.0pt;font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"'>sep</span>
          </p>
        </td>
      </tr>
    </table>

    <!-- TEXT CELL -->
    <table align=left width=160>
     <tr>
      <td>
        <p>
          <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
          mso-fareast-font-family:"Times New Roman"'>ult</span>
        </p>
      </td>
    </tr>
  </table>

  <!-- TEXT CELL -->
  <table align=left width=160>
   <tr>
    <td>
      <p>
        <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
        mso-fareast-font-family:"Times New Roman"'>tur</span>
      </p>
    </td>
  </tr>
</table>

<!-- TEXT CELL -->
<table align=left width=160>
 <tr>
  <td>
    <p>
      <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
      mso-fareast-font-family:"Times New Roman"'>ura</span>
    </p>
  </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

问题出在网络客户端上。出于某种原因，这 4 个表格中的每一个表格旁边总是附加了一个额外的 HTML 元素： 在此处输入图像描述

这些是结果：

MS Outlook 2007（正确显示）： 在此处输入图像描述

Apple GMail 客户端（正确显示和包装，因为它是小分辨率屏幕）： 在此处输入图像描述

Outlook web（有一个额外的 HTML 元素破坏了布局，图片中的详细信息）： 在此处输入图像描述

GMail 网络（有点类似于 Outlook 网络）： 在此处输入图像描述

我还想提一下，我用 Litmus 测试了这些，一切看起来都不错。我不确定为什么在这些“现实世界”的情况下情况会有所不同。

可能与我放置 HTML 签名的过程有关：

  1. 打开包含签名的 HTML 页面
  2. 选择该页面中的所有内容（ctrl+A）
  3. 复制所有内容（ctrl+C）
  4. 打开 MS Outlook 2007
  5. 转到工具 -> 选项 -> 邮件格式 -> 签名
  6. 新签名 -> 将内容粘贴到文本区域 -> 保存新创建的签名。
4

2 回答 2

2

我非常有信心您所要求的不能在 Outlook '07 的签名中完成。

这是因为 Outlook '07/'10/'13 使用 Microsoft Word 引擎并在发送后添加自己的垃圾（p msoNormal 标记）。因为是在发送之后添加的，所以不能使用内联 CSS。在 html 电子邮件设计中，设计人员通常会在样式标签中添加样式以将这些不需要的标签清零，以期待 Outlook 会这样做。这对您不起作用，因为您只使用签名。您可以尝试<style>在签名 html 中包含一个标签，但我怀疑它是否会起作用。

我必须模仿这种行为的最佳建议是使用&nbsp;. 非常骇人听闻的方式，但如果从 Outlook '07 发送，它可能是您“浮动”的唯一选择。例子：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      Text&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
  </tr>
</table>

像这样的东西也可能有效，（肯定更整洁）但我还没有测试过：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <span style="width:150px;">Text 1</span>
      <span style="width:150px;">Text 2</span>
      <span style="width:150px;">Text 3</span>
      <span style="width:150px;">Text 4</span>
    </td>
  </tr>
</table>
于 2014-03-10T18:47:37.737 回答
1

您可以使用单个元素轻松完成该布局<table>，并将这些项目中的每一个设置为一列，而不是使用 4 个单独的<table>元素。

确保您的 CSS 全部是内联的，并尝试尽可能使用表格进行布局（HTML 电子邮件是唯一可以接受此建议的情况）。此外，请尝试仅使用与 Outlook.com 兼容的 CSS。请注意，Outlook.com 实际上用它自己的 HTML 替换了您的一些 HTML，并采用任何内联 CSS 并将其替换为它放置在其样式表中的已转换电子邮件顶部的类/ID（因此.ExternalClass重置）。

此外，您可能需要查看Mailchimp 重置，以修复 Outlook.com 等电子邮件提供商遇到的各种问题。

于 2014-03-10T17:08:01.717 回答