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
问题描述
我从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>元素.这是我能获得的最接近的值，但是由于我们需要使用单位，因此在Microsoft Outlook中不会显示<td>.另一方面，如果我们使用单位(即0px)，则在应用中接收电子邮件时也会遇到相同的问题. - 在表和表单元格中添加了
min-width. - 已将cellspacing和cellpadding属性添加到表中，但是不需要这样做，因为MS Outlook会添加它们.
- Added
line-height:0to the<td>element and then my customline-heightto 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-widthto 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.
没有任何东西对我有用.
Nothing works for me.
我将在<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:"Times New Roman",serif;
color:black">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING
FROM MS OUTLOOK</span></p>
</td>
</tr>
您可能会注意到，即使我们使用的是另一个元素( div ， span )，MS Outlook也会添加一个<p>元素来包装表内容，例如用户建议.
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:"Times New Roman",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;
}
因此，差距在页边空白处和页边空白处.
So the gaps are those margin-top and the margin-bottom.
我尝试过的事情:
- 在
<style>标记中添加了p { margin:0px!important; } - 在
<td>元素中添加了font-size:0px，(并在文本周围的跨度中添加了所需的内容)，这样我们就消除了页边距，但它也不起作用. - 与行高等相同
- Added
p { margin:0px!important; }in the<style>tag - Added
font-size:0pxto 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.1px ，否则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
这篇关于Gmail Android和iOS应用.从MS Outlook发送时CSS样式(td和p元素)不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
