Question

我有一个问题。我已经尝试过使用内联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);

Answer 1

您在电子邮件中无法做到的事情：

包含带有样式的<head>部分。 Apple Mail.app支持它，但Gmail和Hotmail没有，所以这是禁忌。 Hotmail会支持正文中的样式部分但Gmail仍然没有。
链接到外部样式表。没有多少电子邮件客户端支持此最好忘记它。
背景图片/背景位置。 Gmail也是罪魁祸首这个。清除你的花车。再次使用Gmail。
保证金。是的，严重的是，Hotmail忽略了利润。基本上任何CSS 完全定位不起作用。
字体-任何东西。机会是Eudora会忽略你尝试的任何事情用字体声明。

Answer 2

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

例如，

$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，然后将该文档附加到您的电子邮件中。

Answer 3

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

原因是电子邮件客户端无法使用Web浏览器。（最新版本的Outlook使用MS Word，NOT IE或Edge的html渲染引擎。）

所以 - 没有外部链接到css - 所有样式都需要'内联'。您不能使用任何字体保存“网络安全”组，例如Arial，Verdana，Helvetica，Times New Roman等。（google for web-safe fonts - 你会发现几个网站列出最好的为了获得最大的兼容性，或者可以在哪些OS /软件组合中找到哪些字体列表。您的电子邮件设计可能需要更改以适应。

发送电子邮件无法读取CSS样式

3 个答案: