Gmail 转换和删除 HTML 和 CSS 内容

Posted 2023-03-06

【中文标题】Gmail 转换和删除 HTML 和 CSS 内容

【英文标题】：Gmail transforms and removes HTML and CSS contents

【发布时间】：2014-01-11 16:42:28

【问题描述】：

我正在开发一个 WebApp，它会生成一些 QR 码并通过邮件将它们发送给客户端。

我已经阅读了让 gmail 正确解释邮件等的 CSS。我应该以内联方式将其包含在 html 中。

这是我的代码：

// Headers 
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'Content-Transfer-Encoding: base64' . "\r\n";
$headers .= 'To: ' . $qremail . "\r\n";
$headers .= 'From: Mehdi' . "\r\n";

$qr_images_url = "http://" . $_SERVER['HTTP_HOST'] . "/GPAYME-ticket/" . $PNG_WEB_DIR;

// Loop on the QR images 

$html_email .= "<img src='" . $qr_images_url . $qr_image_name . "' style='min-width: 225px; width: 225px; max-width: 225px; min-height: 225px; height: 225px; max-height: 225px; margin-right: 15px; border: 2px solid #D8D4D4; margin-bottom: 15px;' />";

// END of the Loop on the QR images 

mail($email, $subject, $html_email, $headers);

然后它会发送邮件。

所以<img /> 标签应该是这样的：

<img src="http://croisentoi.com/GPAYME-ticket/QRTemp/Qr-Ticket-60ac6339aa0c9cb6121160d55f769882.png" style="min-width:225px;width:225px;max-width:225px;min-height:225px;min-height:225px;max-height:225px;margin-right:15px;border:2px solid #d8d4d4;margin-bottom:15px">

收到邮件时，Gmail 对邮件内容中的<img /> 标签的解释实际上有 5 种情况：

1.一切正常： <img src="http://croisentoi.com/GPAYME-ticket/QRTemp/Qr-Ticket-60ac6339aa0c9cb6121160d55f769882.png" style="min-width:225px;width:225px;max-width:225px;min-height:225px;min-height:225px;max-height:225px;margin-right:15px;border:2px solid #d8d4d4;margin-bottom:15px">

2。图片来源 url 属性被移除： <img style="min-width:225px;width:225px;max-width:225px;min-height:225px;min-height:225px;max-height:225px;margin-right:15px;border:2px solid #d8d4d4;margin-bottom:15px">

3. style 属性被移除： <img src="http://croisentoi.com/GPAYME-ticket/QRTemp/Qr-Ticket-19cde597bca16405b41cb8e3d3391d77.png">

4.在这种情况下，Gmail 在源 url 属性 + 中添加了一个额外字符（/G+PAYME 而不是 /GPAYME）： <img src="http://croisentoi.com/G+PAYME-ticket/QRTemp/Qr-Ticket-368940b3754eb9c2b0fd57285efc9535.png" style="min-width:225px;width:225px;max-width:225px;min-height:225px;min-height:225px;max-height:225px;margin-right:15px;border:2px solid #d8d4d4;margin-bottom:15px">

5.在这种情况下，Gmail 在 style 属性内的 css 中添加了一个额外的空间（宽度：2 25px；而不是宽度：225px；）： <img src="http://croisentoi.com/GPAYME-ticket/QRTemp/Qr-Ticket-368940b3754eb9c2b0fd57285efc9535.png" style="min-width:225px;width:2 25px;max-width:225px;min-height:225px;min-height:225px;max-height:225px;margin-right:15px;border:2px solid #d8d4d4;margin-bottom:15px">

p.s ：为澄清起见，我删除了 gmail 在 <img src=

中添加的额外网址

请问您对此有什么想法吗？谢谢。

【参考方案1】：

您发送电子邮件时似乎没有考虑（base64 编码？）最大线宽。这样一些空格会被插入某处，或者部分丢失。

如果是这种情况，您可以解释所有示例：

没有拆分，都在一行中 src 属性名称中的空格（即“s rc”） style 属性名称中的空格（即“st lye”） src 属性值中的空格（URL 编码的空格是 +） style 属性值中的空格

【讨论】：

谢谢。我刚刚添加了 $headers Content-Transfer-Encoding: base64 并且仍然有这个问题..

base64 行是否不超过 76 个字符？ （78 个，包括\r\n）

是的。我刚刚测试了 bit.ly 缩短网址，而 gmail 恰好完全删除了 src 属性..

这个问题有什么解决办法吗？我也有同样的问题