Gmail 与 Apple 邮件客户端中的电子邮件失真答案

【问题标题】：Email Distored in Gmail vs Apple mail clientGmail 与 Apple 邮件客户端中的电子邮件失真
【发布时间】：2021-07-24 11:47:23
【问题描述】：

所以我有一个应用程序，它允许将 HTML 正文的文本发送给客户。电子邮件看起来可以在苹果邮件客户端中找到，但是在 gmail 网络浏览器中打开相同的电子邮件时，电子邮件会失真，就像它没有接收到 css 一样。有人经历过吗？

这是 HTML css。

<p>Hi, Lorem ipsum,</p>

<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem</p>

<p>Cicero famously orated against his political opponent Lucius Sergius Catilina. Occasionally the first Oration against Catiline is taken for type specimens: Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?Sed ut perspiciatis rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi,</p>

<p>Cicero famously orated against his political opponent Lucius Sergius Catilina. Occasionally the first Oration against Catiline is taken for type specimens: Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?Sed ut perspiciatis rem aperiam eaque.</p>

<p>aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui:</p>
<blockquote>
    <p><b>1.</b>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem.<br />
    <b>2.</b> Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem.<br />
    <b>3.</b> Lorem Ipspms&nbsp;<strong>Ipsum Lorem </strong>by completing this assessment will matter. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut! </p>
</blockquote>

<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem.</p>


<p style="text-align:center;"><a class="btn button--blue" href="%url%" target="_blank">Click Here</a></p>

<blockquote>
    <p>(Note: Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem!<br/>
</blockquote>

<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam  <a href="https://url.com/v2/url?u=https-3A__forms.kanarys.com_kanarys_form_KanarysTroubleShootingForm_formperma_-5FYb-5Fu1Ao9Cr3zOFD3JrVyOwiPp-5FXGsfRawKjYbpiLqc&amp;d=DwMFaQ&amp;c=lN81rx7osu0xwbZXrPpO-qFGLcgA8g9x83GV6eHvJD8&amp;r=fVwWumQF2dXaJ7QG37WTjwjl18fXCZlB5RMBwx0aemo&amp;m=M1WHlhrkSY08ywUB_O_i6XvbsVg9PXp7xYMeoN-iIWU&amp;s=-FIe0JU5q7u1QjVt73a452PViPoIDCzE00IBcv5SV3w&amp;e=">here</a></p>

<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem! </p>

<p>Lorem Ipsum,<br />
<br />
Star Ipsum<br />

联合创始人 Lorem Ipsum

来自 Gmail 网络浏览器的电子邮件

来自 Apple 邮件客户端的电子邮件

【问题讨论】：

你提到了 CSS——你能把它粘贴进去吗？如果您有不喜欢的内容，Gmail 将删除您的整个 <style> 部分。事实上，您的整个电子邮件都会很方便。
@Nathan 按钮区域有 CSS。 Click Here

标签： html css email gmail html-email

【解决方案1】：

如果其中包含不受支持的内容，Gmail 将忽略您的整个部分。您查看这些网站并尝试找出 Gmail 不支持哪些 CSS 元素。 https://www.caniemail.com/clients/ https://caniuse.email/

【讨论】：

【解决方案2】：

抱歉，电子邮件在不同电子邮件服务中的显示方式不同。例如，一些电子邮件服务支持 CSS 动画，而一些不支持。我建议您使用您发送的电子邮件和 HTML。

【讨论】：