当我尝试使用 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
TA贡献2036条经验 获得超8个赞
以下是我从您的信息中收集到的一些建议：
就像我在评论中所说的那样，尽可能多地使用表格。
避免使用类并使用内联样式。将字体样式添加到您的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有免费的模板，您可以使用这些模板作为代码的基础，它们保证可以在任何客户端/设备中工作。
我希望这有帮助。如果您还有问题，请告诉我。
qq_笑_17
TA贡献1818条经验 获得超7个赞
请注意，Outlook 使用 Word 来呈现电子邮件。您可以在以下文章中阅读有关受支持和不受支持的 HTML 元素、属性和级联样式表属性的更多信息：
- 2 回答
- 0 关注
- 240 浏览
添加回答
举报
0/150
提交
取消