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>';
?>

它应该是这样的： Should look like

这是我收到电子邮件时的样子： What it looks like

我对电子邮件中的HTML知识还很陌生，我不知道该如何解决。

Answer 1

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

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

Litmus有免费的模板，您可以使用它们作为代码的基础，并保证它们可以在任何客户端/设备中使用。

我希望这会有所帮助。让我知道您是否还有疑问。

Answer 2

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

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

2 个答案: