gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 06:31:44 24 4
gpt4 key购买 nike

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

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

为了简单起见,我创建了一个简单的 HTML 模板,以便您可以帮助我找出此处的问题。

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

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

  • 已添加 line-height:0<td>元素,然后是我的自定义 line-height<p>元素。这是我能得到的最接近的,但是 <td>不显示在 MS Outlook 中,因为我们需要使用单位。另一方面,如果我们使用单位(即 0 像素),那么在应用程序中接收电子邮件时会遇到同样的问题。
  • 添加了 min-width到表格和表格单元格。
  • 向表中添加了 cellspacing 和 cellpadding 属性,但没有必要这样做,因为 MS Outlook 添加了它们。

没有什么适合我。

我要为 <p> 添加红色背景元素和绿色元素到 <td>元素,这样您就可以看到这里发生了什么。

邮件在 MS Outlook 中是这样呈现的:

enter image description here

这是在 Gmail 应用程序中呈现的方式: enter image description here

您可以看到 Gmail 添加的差距。也许文本太长但没关系,只是想输入一些描述性的东西。

我会继续尝试,直到问题解决。如果有人可以帮助我,我将不胜感激。

编辑:我将粘贴每个客户端生成的经过处理的 HTML(从上面的 HTML 模板),以便更容易发现问题。我将只粘贴表格单元格输出:

这是 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>元素来包装表格内容,即使我们使用另一个元素(divspan)代替,正如一些用户所建议的那样。

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

这就是 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>元素:

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

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

默认应用 margin-top 和 margin-bottom:

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

所以差距是那些边距顶部和边距底部。

我尝试过的:

  • 已添加 p { margin:0px!important; }<style>标签
  • 已添加 font-size:0px<td>元素,(并在文本周围的范围内添加所需的元素)这样我们就可以摆脱边距,但它也不起作用。
  • 同样适用于行高等。

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

同样,这比我预期的要花更长的时间,非常感谢您的帮助。谢谢。

最佳答案

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

<!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> 中应用边距。标签。

MS Outlook 将占用该边距并将其内联到 <p> 中元素,所以 Gmail/Gmail 应用程序最终会收到边距集:)

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

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

关于html - Gmail Android 和 iOS 应用程序。从 MS Outlook 发送时,CSS 样式(td 和 p 元素)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54615570/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com