Gmail Android 和iOS 应用程序.从 MS Outlook 发送时 CSS 样式(td 和 p 元素)不起作用

2022-01-23 00:00:00 email gmail outlook html css

我正在从 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> 元素.这是我能得到的最接近的值，但 <td> 没有显示在 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;<style> 标签中的 }
  • 将 font-size:0px 添加到 <td> 元素，(并在文本周围的范围内添加所需的元素)，这样我们就可以摆脱边距，但它也不起作用.
  • 行高等也是如此.
  • Added p { margin:0px!important; } in the <style> tag
  • Added font-size:0px to the <td> element, (and add the desired one in a span surrounding the text) that way we get rid of the margin but it doesn't work either.
  • Same for line-height, etc.

希望此编辑对您有所帮助，这里需要一些 gmail 方面的专业知识.这在 GMail (Web) 中有效，这可能是一个提示.

Hope this edit helps, some expertise in gmail is needed here. This is working in GMail (Web), that might be a hint.

同样，这需要的时间比我预期的要长，非常感谢您的帮助.谢谢.

Again, this is taking longer that I expected and I would appreciate your help very much. Thank you.

推荐答案

这是我能得到的最好的方法，除非有人提出更好的解决方案，否则我将遵循此方法:

This is the best I can get and I will follow this approach unless someone comes up with a better solution:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gmail APP issue</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        td p.MsoNormal {margin: 0.1px}
    </style>

</head>
<body>  
    <table style="border:0px;border-spacing:0px;border-collapse:collapse;">
        <tbody>
            <tr>
                <td>
                    <p class="MsoNormal">TABLE CELL 1</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p class="MsoNormal">TABLE CELL 2</p>
                </td>
            </tr>
        </tbody>
    </table>  

</body>
</html>

我们正在做的是从 p 元素中删除内联样式，添加 MsoNormal 类并在 <style> 标记中应用边距.

What we are doing is removing the inline style from the p element, adding the MsoNormal class and applying the margin in the <style> tag.

MS Outlook 将采用该边距并将其内联到 <p> 元素中，因此 Gmail/Gmail 应用程序最终将收到边距集:)

MS Outlook will take that margin and will inline it in the <p> element, so Gmail / Gmail app will finally receive the margin set :)

请注意，我们设置了 0.1 像素的边距，否则 Outlook 不会将其内联到 <p> 元素中.

Notice that we are setting a 0.1px margin, otherwise Outlook won't inline it in the <p> element.

请记住，一些电子邮件客户端无法识别样式标签，而另一些则不应用类中的 css，因此 我们应该在 p 元素中设置 margin: 0.1px 为内联样式

Remember that some email clients don't recognize the style tag and some others don't apply the css from classes, so we should set margin: 0.1px in the p element as an inline style

相关文章