Gmail Android &iOS应用程序.从 MS Outlook 发送时 CSS 样式(td 和 p 元素)不起作用 [英] Gmail Android & iOS App. CSS styles (td and p elements) not working when sending from MS Outlook

查看：23
本文介绍了Gmail Android &iOS应用程序.从 MS Outlook 发送时 CSS 样式(td 和 p 元素)不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在从 MS Outlook (2013) 发送一封电子邮件，它运行良好，但在适用于 Android 的 GMail 应用程序中(适用于 iOS)，行(行)之间存在间隙.

I'm sending an email from MS Outlook (2013) and it's working perfectly, but in the GMail app for Android (it also happens for iOS) there is a gap between lines (rows).

您可能知道 MS Outlook 在发送电子邮件时会更改 HTML(您可以看到发送的 HTML，只需将电子邮件另存为 HTML).

As you probably know MS Outlook changes the HTML upon sending the email (you can see the HTML sent just saving the email as HTML).

为了简单起见，我创建了一个简单的 HTML 模板，以便您可以帮助我在这里发现问题.

For the sake of simplicity I've created a simple HTML template so you can help me to spot the problem here. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gmail APP issue</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <table style="border:0px;border-spacing:0px;border-collapse:collapse;">
        <tbody>
            <tr>
                <td>
                    <p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
                </td>
            </tr>
        </tbody>
    </table>  
</body>
</html>

到目前为止，我已经尝试了以下方法但没有成功:

I have tried the following with no luck so far:

  • 将 line-height:0 添加到 <td> 元素，然后将我的自定义 line-height 添加到 <p> 元素.这是我能得到的最接近的结果，但是 没有显示在 MS Outlook 中，因为我们需要使用单位.另一方面，如果我们使用单位(即 0px)，那么我们在应用中接收电子邮件时会遇到同样的问题.
  • 为表格和表格单元格添加了 min-width.
  • 向表格中添加了单元格间距和单元格填充属性，但没有必要这样做，因为 MS Outlook 添加了它们.
  • Added line-height:0 to the <td> element and then my custom line-height to the <p> element. This is the closest I can get but that <td> is not displayed in MS Outlook since we need to use units. On the other hand, if we use units (i.e. 0px) then we have the same issue when receiving the email in the app.
  • Added a min-width to the table and table cells.
  • Added the cellspacing and cellpadding attrs to the table but there is no need to do that because MS Outlook adds them.

什么都不适合我.

我要为 <p> 元素添加红色背景，为 <td> 元素添加绿色背景，这样你就可以看到发生了什么在这里.

I'm going to add a red background to the <p> element and a green one to the <td> element so you can see what's happening here.

这是电子邮件在 MS Outlook 中的呈现方式:

This is how the email is rendered in MS Outlook:

这是在 Gmail APP 中的呈现方式:

and this is how is rendered in the Gmail APP:

您可以看到 Gmail 添加的差距.也许文字太长了，但没关系，只是想输入一些描述性的内容.

You can see the gap that Gmail adds. Maybe the text is too long but it doesn't matter, just wanted to enter something descriptive.

我会继续努力，直到解决为止.如果有人能帮助我，我将不胜感激.

I will keep trying until it's solved. If someone could help me I would really appreciate it.

我将粘贴每个客户端(来自上述 HTML 模板)生成的处理过的 HTML，以便更容易地发现问题.我将只粘贴表格单元格输出:

I'm going to paste the processed HTML generated by every client (from the above HTML template) in order to make easier to spot the problem. I'm going to paste only the table cell output:

这是 MS Outlook 发送的 HTML:

<tr>
  <td style="padding:0in 0in 0in 0in">
    <p class="MsoNormal"><span style="font-size:13.5pt;font-family:&quot;Times New Roman&quot;,serif;
  color:black">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING
  FROM MS OUTLOOK</span></p>
  </td>
 </tr>

正如您所看到的，MS Outlook 添加了一个 <p> 元素来包装表格内容，即使我们正在使用另一个元素(div、span) 而不是，正如一些用户所建议的那样.

As you can notice MS Outlook adds a <p> element to wrap the table content even though we are using another element (div, span) instead, as some users suggested.

另请注意，MS Outlook 删除了我们在 <p> 元素中内联的 style="margin:0; 但类 MsoNormal 避免了顶部和底部边距，因此 MS Outlook 不会在此处添加任何间隙.

Also notice that MS Outlook has stripped out the style="margin:0; we had inline in the <p> element but the class MsoNormal avoids the top and bottom margin so MS Outlook is not adding any gaps here.

这是 Gmail (Android) 处理从 MS Outlook 收到的 HTML 的方式

<tr>
  <td style="padding:0cm 0cm 0cm 0cm">
    <p class="MsoNormal"><span style="font-size:13.5pt;font-family:&quot;Times New Roman&quot;,serif;color:black">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS
  OUTLOOK<u></u><u></u></span></p>
  </td>
 </tr>

并且这个样式被应用到 <p> 元素:

And this style is being applied to the <p> element:

.msg-8292648110214437287 p {
    margin-right: 0cm;
    margin-left: 0cm;
    font-size: 12.0pt;
    font-family: "Times New Roman",serif;
}

msg-8292648110214437287 似乎是 Gmail 自动生成的类.如您所见，仅对左侧和右侧应用了边距，但不适用于顶部和底部.

msg-8292648110214437287 seems to be a autogenerated class by Gmail. As you can see only applies margin to left and right, however it's not appling to the top and bottom.

margin-top 和 margin-bottom 从默认值开始应用:

The margin-top and margin-bottom are being applied from default: 

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

所以间隙是那些 margin-top 和 margin-bottom.

So the gaps are those margin-top and the margin-bottom.

我尝试过的:

  • 添加 p { margin:0px!important;} 在