如何将 CSS 附加到 PHP 中的 mail() 方法？答案

【问题标题】：How do I attach CSS to the mail() method in PHP?如何将 CSS 附加到 PHP 中的 mail() 方法？
【发布时间】：2014-11-07 02:31:35
【问题描述】：

当用户忘记密码时，我有一封电子邮件发送给用户：

<?php
//OTHER CODE BEFORE ALL THIS

$to = "$useremail";
$from = "forgotpassword@mysite.com";
$headers ="From: $from\n";
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=iso-8859-1 \n";

$subject = 'Temporary Password';
$msg = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Message</title>
</head>
<body>
<div>
  <div>Temporary Password</div>
  <p>Hello<b> '.$f.'</b>,</p>
  <p>You indicated that you forgot your login password. We can generate a temporary password for you to log in with, then once logged in you can change your password to anything you like.</p>
  <p>After you click the link below your password to login will be:</p>
  <p><b>'.$tempPass.'</b></p>
  <div style="margin: 0px auto;
text-align: center;">
    <p><a style="   background: #f3c1e6;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f3c1e6), to(#de66c0));
    background: -moz-linear-gradient(#f3c1e6, #de66c0);
    background: linear-gradient(#f3c1e6, #de66c0);
    border: solid 1px #cd5daf;
    border-bottom: solid 3px #ce5eb0;
    box-shadow: inset 0 0 0 1px #e998d3;
    color: #fff;
    text-shadow: 0 1px 0 #ce5eb0;
    zoom: 1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
    -moz-box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
    der-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    padding: 12px 15px;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    cursor: pointer;" href="http://www.bragmouth.com/forgot_pass.php?u='.$u.'&p='.$hashTempPass.'">Click Here to Apply</a></p>
  </div>
</div>
</body>
</html>
';
if(mail($to,$subject,$msg,$headers)) {
echo 'true';
exit();
} else {
echo 'false';
exit();
}
    } else {
        echo 'false';
    }
    exit();
}
?>

我的问题是我无法通过内部或外部样式表向这封电子邮件添加任何 CSS。但是，我可以将内联样式添加到 HTML 中的任何标记。我需要将 Content-type 更改为 text/css 还是可以有两种内容类型？

另外，我无法在雅虎邮件中显示渐变（这可能是他们的错）。我可以让它们出现在谷歌邮件中，除了链接（这就是我发布链接样式的原因）。这也是谷歌的错吗？这一切都可以通过附加样式表来解决吗？

【问题讨论】：

电子邮件客户端的渲染引擎非常过时——有些，比如 google，不支持引用样式表——内容类型对确保邮件客户端解析引用样式表影响不大。为了确保统一的外观，您应该使用内联 CSS。鉴于第一点，我预计很少有客户端支持 CSS3 渐变——您可能希望使用背景图像来代替。
很遗憾你不能附加css文件
Terry - 看起来我将不得不使用背景图像来实现我想要的渐变效果。我只是希望这些电子邮件客户端现在支持背景图片。

标签： php html css email

【解决方案1】：

我建议不要在您的电子邮件 html 中使用 css 样式。 Outlook 用他们的 CSS 做了一些奇怪的事情（他们甚至改变你的 HTML 来添加他们的自定义类），我相信 Gmail 去掉了 head 标签。

我使用了一个工具来将 CSS 转换为内联样式：

Css Inliner

【讨论】：

我真的很喜欢这个 CSS Inliner，它在我需要的时候可以节省很多时间。谢谢！

【解决方案2】：

您应该不自己构建邮件标头，因为有很多小事情可能会出错。只需使用广泛使用且经过测试的邮件程序，例如Swiftmailer。然后可以添加一个css文件作为邮件的附件，直接在邮件中使用，见Here。

编辑：好的，我错了，这不适用于 CSS 文件，但您可以将带有普通 css 的 HTML 文件转换为带有内联 css 的 html 文件，请参阅Here

【讨论】：

我查看了 swiftmailer，我想我宁愿使用自己的代码。还是谢谢 tkausl！