GMail App 中的 Outlook HTML 签名：<td> 元素之间的间隙答案

【问题标题】：Outlook HTML Signature in GMail App: Gap between <td> ElementsGMail App 中的 Outlook HTML 签名：<td> 元素之间的间隙
【发布时间】：2017-09-26 11:15:34
【问题描述】：

当我在 Mac OS 上显示使用 Outlook 2017 创建的 HTML 签名时，我遇到了 Android 上 GMail 应用程序的奇怪行为。

首先，这是我所做的：

我创建了一个带有简单表格布局的 HTML 签名并在浏览器中打开
我将浏览器窗口中的内容复制到 Outlook 的签名面板中（Outlook -> 设置 -> 签名）
我在粘贴内容后保留了原始格式

现在签名在浏览器、Mac 上的 Outlook 和 iPhone 标准邮件应用程序中看起来基本正常。在 Android 上的 Gmail 中，表格行之间的差距非常大，我找不到任何方法来控制它们。当然，我做了一些研究，最终得到了在许多其他来源中讨论的建议 here 和 here。格式问题已在Google Forums 中得到解决。 Some People 能够将其分解为 Outlook 添加的特定 CSS 类 MsoNormal，但是它们都已经很老了，这些建议似乎对我不起作用。我尝试了很多东西，最终得到了三个不同的版本，结果都相同或相似。

第一个版本使用表格内的 div 来构造文本：

<table style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
  <tbody>
    <tr>
      <td>
        <img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top; line-height:0;' />
      </td>
      <td style='width:5px'></td>
      <td style='vertical-align:top;'>
        <div style='font-size: 11px; margin:0px; padding:0px;'>
          Peter Pan<br>
          Chief Executive Officer<br>
          <b>The Company</b>
        </div>
        <div style='font-size: 9px; margin:0px; padding:0px;'>
          Reach me at:<br>
          peter@thecompany.com<br>
          +00 324 244 20
        </div>
        <div style='font-size: 9px; margin:0px; padding:0px;'>
          ...or visit me at:<br>
          My Office<br>
          Office Street Nr.<br>
          44556 Officetown
        </div>
      </td>
    </tr>

  </tbody>
</table>

第二种使用表中的表：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
        p.MsoNormal {
            margin: 0px !important;
        }
</style>
</head>
<body>
<table  class='tbl' style='min-width:300px; font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
  <tbody class='tbl_body'>
    <tr class='tbl_tr' style="display: block; white-space: nowrap;">
      <td class='tbl_td' style="line-height:0; display: inline-block;"><img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' /></td>
      <!--<td style='width:5px; display: inline-block;'></td>-->
      <td class='tbl_td' style='vertical-align:top; display: inline-block;'>
        <table class='tbl' style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
          <tbody class='tbl_body'>
            <tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'>
              <td class='tbl_td' style="display: inline-block;">Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td>
            </tr>
            <tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap; '>
                <td class='tbl_td' style="display: inline-block;">Reach me at:<br>peter@thecompany.com<br>+00 324 244 20</td>
            </tr>
            <tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'>
              <td class='tbl_td' style="display: inline-block;">...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>

  </tbody>
</table>
</body>
</html>

最后我使用了 3 x 2 表格布局，图像跨越 3 行：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style type="text/css">
          p.MsoNormal {
              margin: 0px !important;
          }
  </style>
</head>
<body>
  <table style='font-family:Arial; cellspacing:0; cellpadding:0; border:0; border-collapse: collapse; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
    <tbody>
      <tr style='margin:0px; padding:0px;'>
        <td rowspan="3" style='line-height:0'>
          <img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' />
        </td>
        <td style='font-size: 11px; margin:0px; padding:0px;'>Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td>
      </tr>
      <tr style='margin:0px; padding:0px;'>
        <td style='font-size: 11px; margin:0px; padding:0px;'>Reach me at:<br>peter@thecompany.com<br>+00 324 244 20</td>
      </tr>
      <tr style='margin:0px; padding:0px;'>
        <td style='font-size: 11px; margin:0px; padding:0px;'>...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td>
      </tr>
    </tbody>
  </table>
</body>

在 GMail 中，表格方法的结果看起来有点像这样：

而 div 方法有点像这样：

如您所见，文本框之间有很大的间隙，尽管没有边距、内边距、单元格间距或其他任何东西。

我在 CSS 上摆弄了很多，但没有想出任何解决方案。

希望有人能帮忙。

问候，马库斯

【问题讨论】：

我也遇到了这个问题：stackoverflow.com/questions/54615570/…你终于解决了吗？

标签： android html css outlook gmail

【解决方案1】：

首先，你有没有尝试在你的头部使用<meta name="viewport" content="width=device-width" />？

那么，你是否也尝试减少<td> 中的line-height，或者将所有信息封装在一个<td> 标记中，并在其中添加一些<br> 中断？

希望对你有所帮助。

Chaaampy。

【讨论】：