PHP 电子邮件在 GMail 和 Outlook 中显示不正确

Question

当我尝试使用 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 很陌生，我不知道如何解决这个问题。

Answer 1

以下是我从您的信息中收集到的一些建议：就像我在评论中所说的那样，尽可能多地使用表格。避免使用类并使用内联样式。将字体样式添加到您的td以及您的 td 内的任何 html 元素。使用font或span标签而不是p标签。一个例子：<td style="font-family:Arial; font-size:18px;">&nbsp; &nbsp; <font style="font-family:Arial; font-size: 18px">Text here</font></td>不要使用填充、边距和浮动，使用高度和宽度来创建间距。您甚至可以使用透明图像来创建间距：<tr>&nbsp; &nbsp; <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->&nbsp; &nbsp; <td><img src="full-image.jpg" alt="your visible image here"></td>&nbsp; &nbsp; <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;">&nbsp; &nbsp; <td height="50" width="10" style="height: 50; width: 10px"></td>&nbsp; &nbsp; <td height="50"><img height="50" style="height: 50px;" src="transparent.png" alt="this is a transparent image"></td>&nbsp; &nbsp; <td height="50" width="10" style="height: 50; width: 10px"></td></tr><!-- horizontal spacing to create top/bottom margins END --><tr>&nbsp; &nbsp; <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->&nbsp; &nbsp; <td><img src="full-image.jpg" alt="your visible image here"></td>&nbsp; &nbsp; <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins --></tr>其他提示：避免使用 css border-radius，使用图片代替使用网络安全字体，使用谷歌查找哪些是网络安全的使用 CDN 引用您的图像Litmus有免费的模板，您可以使用这些模板作为代码的基础，它们保证可以在任何客户端/设备中工作。我希望这有帮助。如果您还有问题，请告诉我。

Answer 2

请注意，Outlook 使用 Word 来呈现电子邮件。您可以在以下文章中阅读有关受支持和不受支持的 HTML 元素、属性和级联样式表属性的更多信息：Outlook 2007 中的 Word 2007 HTML 和 CSS 呈现功能（第 1 部分，共 2 部分）Outlook 2007 中的 Word 2007 HTML 和 CSS 呈现功能（第 2 部分，共 2 部分）