Question

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

首先，这就是我所做的：

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

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

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

＆＃13;

<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>

＆＃13;

第二个使用表格中的表格：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

div的方法有点像这样：

正如您所看到的，文本框之间存在较大的间隙，尽管没有边距，填充，单元间距或任何其他内容。

我经常使用CSS，并没有提出任何解决方案。

我希望有人可以提供帮助。

此致马库斯

Answer 1

首先，您是否尝试在头部使用<meta name="viewport" content="width=device-width" />？

然后，您是否也尝试减少line-height的{{1}}，或者将所有信息包装在一个<td>标记中，并在其中加入<td>个中断？

希望它有所帮助。

Chaaampy。

GMail应用程序中的Outlook HTML签名：元素之间的差距

1 个答案: