发送电子邮件无法阅读 CSS 样式答案

【问题标题】：Send E-mail can't Read CSS Style发送电子邮件无法阅读 CSS 样式
【发布时间】：2016-09-18 10:33:43
【问题描述】：

我有一个问题。我已经尝试过使用内联 css 的任何方法，或者我的电子邮件无法读取 css 样式。我已经尽力了，但我仍然不知道问题所在。谁能帮帮我？

$firstname = $row['firstname'];
$to      = $email;
$subject = 'Pesan dari kebunbibit';
$message = "<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd'> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <title>Pesan dari {shop_name}</title> <link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'></head> <body> <table class='table table-mail' style='width: 100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progidXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);'> <tbody> <tr> <td class='space' style='width: 20px; padding: 7px 0;'>&nbsp;</td> <td style='padding: 7px 0;' align='center'> <table class='table' style='width: 100%;' bgcolor='#ffffff'> <tbody> <tr> <td class='logo' align='center'><a style='text-decoration: none; color: #337ff1;' title='{shop_name}' href='{shop_url}'> <img src='{shop_logo}' alt='{shop_name}' /> </a></td> </tr> <tr> <td class='titleblock' style='padding: 7px 0; background-color: #088e64; height:155px;' align='center'><span style='color: #fff; font-family: Open-sans,sans-serif; font-size: small;'> <span class='title' style='font-size: 62px; line-height: 90px; font-family: 'Grand Hotel', cursive;'>Dear Bapak / Ibu $firstname,</span><br /> <span class='subtitle' style='font-size: 40px; line-height: 40px; font-family: 'Grand Hotel', cursive;'>Terimakasih telah berbelanja di {shop_name}<br />&nbsp; </span></span></td> </tr> <tr> <td class='space_footer' style='padding: 0!important;'>&nbsp;</td> </tr> <tr> <td> <table class='table' style='width: 100%;'> <tbody> <tr> <td style='padding: 7px 0;' width='10'>&nbsp;</td> <td style='padding: 7px 0;'> <p align='center' style='font-size:20px;' data-html-only='1'> <span style='color:#c77501;'>Order</span> <span style='color: #69ad00;'><strong>#{order_name}</strong></span> <span style='color:#c77501'>sudah kami kirim dengan nomor resi</span> <strong><span style='color:#69ad00'>{shipping_number}</span></strong>.</p> <p align='center'> <span style='font-size:20px color: #555454; font-family: Open-sans,sans-serif; '><span style='color: #c77501;'>Status pengiriman bisa dicek di <a style='text-decoration: none; color: #337ff1;' href='{followup}'>{followup}</a> 1 hari setelah email ini diterima, mohon dipastikan ada penerima paket <br> untuk beberapa hari kedepan.</span></span></p></td> <td style='padding: 7px 0;' width='10'>&nbsp;</td> </tr> </tbody> </table> </td> </tr> <tr> <td class='space_footer' style='padding: 0!important;'>&nbsp;</td> </tr> <tr> <td class='box' style='> <table class='table' style='width: 100%;'> <tbody> <tr> <td style='padding: 7px 0;' width='10'>&nbsp;</td> <td style='padding: 7px 0;'> <p align='center' style='text-transform: uppercase; font-size:20px; color:#088e64;'>Penting :</p> </td> <td style='padding: 7px 0;' width='10'>&nbsp;</td> </tr> <tr> <td> <td><img src='https://www.kebunbibit.id/themes/buyshop/mails/img/Mediatanam.png' width='250'><td> <td><a href='http://www.youtube.com/watch?v=X9L7KCQkoWY' target='_blank'><img src='http://kebunbibit.id/themes/buyshop/mails/img/Tutorialvidio.png' width='250'></a><td> <td><a href='https://kebunbibit.id/module/helpdesk/Helpdesk' target='_blank'><img src='https://www.kebunbibit.id/themes/buyshop/mails/img/Bantuan.png' width='250'></a><td> <td><img src='https://www.kebunbibit.id/themes/buyshop/mails/img/Garansitanaman.png' width='250'><td> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class='linkbelow' style='padding: 7px 0;'><span style='color: #555454; font-family: Open-sans,sans-serif;'> <span style='color:#41b501'>Bapak / Ibu dapat melihat status terakhir dari order ini pada bagian</span> <a style='text-decoration: none; color: #337ff1;' href='{history_url}'>'Riwayat Belanja'</a> di <a style='text-decoration: none; color: #337ff1;' href='{my_account_url}'>'Akun Saya'</a> <span style='color:#4f60fd'>pada website kami <a href='https://kebunbibit.id/' style='text-decoration:none; color:4f60fd'>www.kebunbibit.id</a></span> </span></td> </tr> <tr> <td class='space_footer' style='padding: 0!important;'>&nbsp;</td> </tr> <tr> <td class='footer' style='border-top: 4px solid #84c225; padding: 7px 0px; text-align: center;'> <table width='100%'> <tbody> <tr> <td align='center' width='85%'><span style='color: #555454; font-family: Open-sans,sans-serif; font-size: small;'>PT. KEBUNBIBIT PENUH BUNGA | Dusun Tonggolari RT04 RW09 Desa Sidomulyo, Kota Batu - Jawa Timur <br /> Layanan Pelanggan 0341-599399 | SMS CENTER : 08569020300</span></td> <td align='right' width='15%'><a href='http://twitter.com/kebunbibit'><img style='width: 35px; height: 35px; padding-bottom: 2px;' src='http://www.nasa.gov/sites/default/files/images/twitter-icon.png' alt=' /> </a><a href='http://facebook.com/kebunbibit'><img style='width: 35px; height: 35px; padding-bottom: 2px;' src='http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png' alt=' /></a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> <td class='space' style='width: 20px; padding: 7px 0;'>&nbsp;</td> </tr> </tbody> </table> </body> </html>";

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";

// More headers
$headers .= 'From: kebunbibit.id <noreply@yourwebsite.com>'."\r\n" . 'Reply-To: "Admin" <"admin@kebunbibit.id">'."\r\n";
$headers .= 'Cc: admin@kebunbibit.id' . "\r\n"; //untuk cc lebih dari satu tinggal kasih koma
@mail($to, $subject, $message, $headers);

【问题讨论】：

请使用<! DOCTYPE html> 而不是<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd'>
@Fil 它不会改变任何东西
是的，我的意思是使用html5，这就是为什么，而不是旧方法，w3schools.com/html/html_intro.asp

标签： php html css email

【解决方案1】：

不要硬编码你为电子邮件制作样式的方式，只需以简单的方式进行，

例如，

$html_message = 
  '<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>'.$html_title.'</title>
    </head>
    <body>
      <div style="width: 640px; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">
      <h1>'.$html_heading.'</h1>
      <div>
        '.$message.'
      </div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>Note:</p>
      <p>This email is auto generated by server please do not reply here</p>

      </div>
    </body>
  </html>';

尽量像这样，使用 <link> 调用外部 css 不起作用。

另一种选择是将您的 html 转换为 PDF，然后将该文档附加到您的电子邮件中。

【讨论】：

这些变量的作用是什么？
你想要包含的消息，就是那些变量里面的内容，但是它是可选的，它只是为了向你展示如何使它更简单。我在我的项目中使用该代码。
但这不是我的问题-____-

【解决方案2】：

您不能在电子邮件中做什么：

包括带有样式的<head> 部分。 Apple Mail.app 支持它，但 Gmail 和 Hotmail 没有，所以这是一个禁忌。 Hotmail 将支持正文中的样式部分，但 Gmail 仍然没有。
链接到外部样式表。没有多少电子邮件客户端支持这一点，最好忘记它。
背景图像/背景位置。 Gmail也是罪魁祸首这个。清除你的花车。再次使用 Gmail。
边距。是的，说真的，Hotmail 忽略了利润。基本上任何 CSS 定位根本不起作用。
字体-任何东西。 Eudora 很有可能会忽略你试图做的任何事情用字体声明。

【讨论】：

那么除了margin还应该用什么？而不是如何设置 html 电子邮件的样式？
在表格中使用单元格填充和单元格间距。

【解决方案3】：

HTML 电子邮件仍然是使用旧版 HTML3 的问题。用于布局的表格，简单的块状图形。

原因是电子邮件客户端在他们可以做的事情上没有赶上网络浏览器。（最新版本的 Outlook 使用 MS Word 的 html 呈现引擎，而不是 IE 或 Edge）。

所以 - 没有指向 css 的外部链接 - 所有样式都需要“内联”。除了“网络安全”组之外，您不能使用任何字体，例如 Arial、Verdana、Helvetica、Times New Roman 等（去谷歌搜索网络安全字体 - 您会发现几个网站列出了最好的字体以获得最大的兼容性，或者列出可以在哪些操作系统/软件组合上找到哪些字体）。您的电子邮件设计可能需要更改以适应。

【讨论】：