PHP 电子邮件在 GMail 和 Outlook 中显示不正确
当我尝试使用 PHPMailer 库发送 HTML 电子邮件时，收到的电子邮件显示不正确。
我已经尝试过使用不同的邮件客户端（Gmail 和 Outlook），但它们看起来非常相似。
这是我当前的代码
require_once 'includes/mail-denied.php'; // Here is specified the $message variable, containing the HTML and CSS (https://i.imgur.com/UG1B34V.png)
$keys = array('{{ server_name }}', '{{ player_name }}', '{{ reason_area }}', '{{ date }}');
$_POST['description'] = nl2br($_POST['description']);
$replace = array($servernam, $name, $_POST['description'], date("Y"));
$message = str_replace($keys, $replace, $message);
$mail_manager = new PHPMailer(true);
try {
$mail_manager->SMTPDebug = 2;
$mail_manager->setFrom('noreply@'.$_SERVER['HTTP_HOST'], $servernam);
$mail_manager->addAddress($mail);
$mail_manager->addReplyTo('noreply@'.$_SERVER['HTTP_HOST'], 'Do not reply');
$mail_manager->isHTML(true);
$mail_manager->Subject = "Staff Application System - ".$servernam;
$mail_manager->Body = $message;
$mail_manager->AltBody = 'Your application has been declined.';
$mail_manager->send();
} catch (Exception $e) {
echo "Message could not be sent. Mailer Error: {$mail_manager->ErrorInfo}";
我确实收到了电子邮件，但部分 HTML 看起来很乱。
这是 HTML 代码：
<?php
$message = '
<div style="width: 500px;
height: 110px;
position: fixed;
background-color: #ff9999;
border-bottom: 1px solid #ff8080;
display: block;
border-top-left-radius: .5em;
border-top-right-radius: .5em;
color: #FFF;
text-align: center;
font-family: \'Product Sans\', Arial, sans-serif;">
<h2>Staff System Application</h2>
<h3>{{ server_name }}</h3>
</div>
它应该是这样的：
这就是我收到电子邮件时的样子：
我对电子邮件中的 HTML 很陌生，我不知道如何解决这个问题。
2回答
-
慕桂英3389331
以下是我从您的信息中收集到的一些建议：就像我在评论中所说的那样，尽可能多地使用表格。避免使用类并使用内联样式。将字体样式添加到您的td以及您的 td 内的任何 html 元素。使用font或span标签而不是p标签。一个例子：<td style="font-family:Arial; font-size:18px;"> <font style="font-family:Arial; font-size: 18px">Text here</font></td>不要使用填充、边距和浮动，使用高度和宽度来创建间距。您甚至可以使用透明图像来创建间距：<tr> <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins --> <td><img src="full-image.jpg" alt="your visible image here"></td> <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins --></tr><!-- horizontal spacing to create top/bottom margins START --><tr height="50" style="height:50px;"> <td height="50" width="10" style="height: 50; width: 10px"></td> <td height="50"><img height="50" style="height: 50px;" src="transparent.png" alt="this is a transparent image"></td> <td height="50" width="10" style="height: 50; width: 10px"></td></tr><!-- horizontal spacing to create top/bottom margins END --><tr> <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins --> <td><img src="full-image.jpg" alt="your visible image here"></td> <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins --></tr>其他提示：避免使用 css border-radius，使用图片代替使用网络安全字体，使用谷歌查找哪些是网络安全的使用 CDN 引用您的图像Litmus有免费的模板，您可以使用这些模板作为代码的基础，它们保证可以在任何客户端/设备中工作。我希望这有帮助。如果您还有问题，请告诉我。00 -
qq_笑_17
请注意，Outlook 使用 Word 来呈现电子邮件。您可以在以下文章中阅读有关受支持和不受支持的 HTML 元素、属性和级联样式表属性的更多信息：Outlook 2007 中的 Word 2007 HTML 和 CSS 呈现功能（第 1 部分，共 2 部分）Outlook 2007 中的 Word 2007 HTML 和 CSS 呈现功能（第 2 部分，共 2 部分）00