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>

<div style="width: 500px;
    height: 600px;
    background-color: #f2f2f2;
    display: block;
    padding-top: -10px;
    z-index: 999;
    border-radius: .5em;
    font-family: \'Product Sans\', Arial, sans-serif;">
    <div style="padding: 120px 15px 5px 15px;
        color: #797979;
        font-family: \'Product Sans\', Arial, sans-serif;">
        <p>Dear {{ player_name }}...</p>

        <p>After carefully considering your staff application the head staff have acquired a verdict.</p>

        <p>We regret to inform you that your application has been:</p>

        <p style="color: #C60000; font-size: 80px; text-align: center; margin-top: 10px;">DENIED</p>

        <div style="margin-top: -55px; font-size: 15px;">
            <p>You have been denied for the next reason(s):</p>
            {{ reason_area }}
        </div>
        <br>
        <br>
        <p style="text-align: center; padding-bottom: -15px;">THIS IS AN AUTOMATED MESSAGE, DO NOT REPLY.</p>
    </div>
</div>

<div style="margin-top: -10px;
    width: 500px;
    height: 90px;
    position: fixed;
    display: block;
    background-color: #595959;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
    text-align: center;
    font-family: \'Product Sans\', Arial, sans-serif;
    color: #edeff2;">
    <p style="font-size: 20px;">&copy; {{ server_name }} - {{ date }}</p>
    <p style="font-size: 9px;">&copy; {{ date }} Carinae Studios. All rights reserved.</p>
</div>';
?>

它应该是这样的：

这是我收到电子邮件时的样子：

我对 HTML 内部电子邮件很陌生，我不知道如何解决这个问题。

Answer 1

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

Answer 2

以下是我从您的信息中收集到的一些建议：
就像我在评论中所说的那样，尽可能多地使用表格。

避免类并使用内联样式。将字体样式添加到 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，改用图片
使用网络安全字体，使用google查找哪些是网络安全
使用 CDN 引用您的图像

Litmus 有免费的模板，您可以使用这些模板作为代码的基础，它们保证可以在任何 client/device.

中工作

希望对您有所帮助。如果您还有问题，请告诉我。

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

PHP Email showing incorrectly in GMail and Outlook

html

php

outlook

gmail

phpmailer