HTML 电子邮件中丢失的 CSS 颜色

Posted 2023-03-06

【中文标题】HTML 电子邮件中丢失的 CSS 颜色

【英文标题】：CSS Colors lost in HTML Email

【发布时间】：2014-10-24 02:12:52

【问题描述】：

我尝试使用 php 邮件发送功能动态发送电子邮件，但由于某些原因，我的电子邮件没有显示颜色。

$to = $fetch_querygetemail['email'];
$subject = "report";
//$message = $_POST['allreportcont'];
$message = @"
<table style='width:700px; background-color:#F9F9F9; padding:20px;'>
<tbody><tr>
<td colspan='2'><span style='color:#f68e36; font-weight:bold !important;'>Coupons Sales</span> <span style='color:#333;'>(From: 2014-08-12 | To: 2014-08-29)</span><br>
<hr></td></tr>
<tr>
<td style='color:#333; padding-left:45px; width:300px;'>Coupons Offered</td>
<td>831</td>
</tr>
<tr>
<td style='color:#333; padding-left:45px;'>Coupons Left</td>
<td>715</td>
</tr>
<tr>
<td style='color:#333; padding-left:45px;'>Total Sold</td>
<td>193</td>
</tr>
<tr>
<td style='color:#333; padding-left:45px;'>Sold &amp; Redeemed</td>
<td>18</td>
</tr>
<tr>
<td style='color:#333; padding-left:45px;'>Sold &amp; Unredeemed (Expired)</td>
<td>175</td>
</tr>
<tr>
<td colspan='2'>&amp;nbsp;</td>
</tr>
<tr>
<td colspan='2'><span style='color:#f68e36; font-weight:bold !important;'>Amount Sales</span><br>
<hr></td>
</tr>
<tr>
<td style='color:#333; padding-left:45px;'>Gross Sales</td>
<td>$2100</td>
</tr>
<tr>
<td style='color:#333; padding-left:45px;'>Discount Offered</td>
<td>$70</td>
</tr>
</tbody></table>
";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: Sales<[e-mail]>' . "\r\n";
mail($to,$subject,$message,$headers);

电子邮件完美发送到我的邮箱，但不显示 CSS 颜色、宽度，我该如何解决？

<table style='width:700px; background-color:#F9F9F9; padding:20px;'> 的 CSS 工作正常，没有其他内部 CSS 工作。

【问题讨论】：

使用什么收件箱？你试过color:#333 !important;吗？可能是因为 Inbox 覆盖了颜色样式。

您似乎以错误的方式使用!important。

@Moshtaf - 使用 Gmail，但 !important 也不起作用，因为我使用了 font-weight:bold; ！重要的;这没有加粗我的文字。

@Moshtaf - 是的，抱歉，我刚刚在我的代码中将其更正为 font-weight:bold !important;，但仍然是同样的问题。

你试过了吗？ <span style='color:#f68e36 !important; font-weight:bold !important;'>

【参考方案1】：

不要使用style 属性，因为并非所有电子邮件客户端都尊重它。

相反，您想使用旧的、丑陋的 HTML4 代码。

<td><font color="#333333>Coupons Offered</font></td>

在我的回答中查看有关处理 HTML 电子邮件的更多信息：Best practices for styling HTML emails

此外，此支持矩阵在处理电子邮件和您的预期目标时非常有用：https://www.campaignmonitor.com/css/

【讨论】：

不需要字体标签。 <td style="color: #333"> 工作得很好。

如何设置宽度？我什至尝试过<td width="300"> 也没有用