PHP HTML电子邮件类选择器不起作用GMAIL答案

【问题标题】：PHP HTML email class selector not working GMAILPHP HTML电子邮件类选择器不起作用GMAIL
【发布时间】：2016-05-11 16:29:54
【问题描述】：

我有通过 PHP 发送 HTML 电子邮件的代码。它有一张桌子。我想在屏幕截图中加粗圆形。但是到达 Gmail 的电子邮件没有显示粗体和其他应该应用于“关于”类选择器的更改。

received email screenshot

我可以在 PHP HTML 电子邮件的样式表中使用类或 ID 选择器吗？我不喜欢使用内联 CSS，因为它效率低下。我在身体之间使用过它们。这是代码；

$to = "xxxx@gmail.com, xxxx@gmail.com"; //multiple recipients with comma separated
$subject = "Here is the subject"; //cannot contain newline characters

$message = "<h1>This is Heading H1</h1>";
$message .= "This is my <b>first</b> line of text.<br>This is my <b>second</b> line of text<br><br>"; //each line should be separated with (\n).  
$message .= "<html>
                <head>
                    <style>
                        body{
                            color:#000000;
                            background-color:#FFFFFF;
                            font-family:arial, verdana, sans-serif;
                        }
                        h1{
                            font-size:18px;
                        }
                        p{
                            font-size:12px;
                        }
                        table{
                            background-color:#efefef;
                            border-style:solid;
                            border-width:1px;
                            border-color:#999999;
                        }
                        th{
                            background-color:#cccccc;
                            font-weight:bold;
                            padding:5px;
                        }
                        td{
                            padding:5px;
                        }
                        td.about{
                            font-family:courier, courier-new, serif;
                            font-weight:bold;
                        }
                    </style>
                </head>
                <body>
                    <table>
                        <tr>
                            <th> About </th>
                            <th> Description </th>
                        </tr>
                        <tr>
                            <td class=\"about\"> Name </td>
                            <td> Andreas </td>
                        </tr>
                        <tr>
                            <td class=\"about\"> Address </td>
                            <td> Germany </td>
                        </tr>
                        <tr>
                            <td class=\"about\"> Message </td>
                            <td> I like your 8 day tour package. What are the rates? </td>
                        </tr>
                    </table>
                </body>
            </html>
            "; 

//headers like From, Cc, Bcc, Reply-to, Date ???????????
//$header = "From:raveen1231@gmail.com \r\n"; 
$header = "From: RXXXXX CXXXXX <rxxxx1111@gmail.com> \r\n"; //additional headers should be separated with (\r\n)
//$header .= "Cc: rxxxxx111@gmail.com \r\n";
//$header .= "Bcc: rxxxxx222@gmail.com \r\n";

//always specify MIME version, content type, and character set when sending HTML email
$header .= "MIME-Version: 1.0 \r\n";
$header .= "Content-type:text/html;charset=UTF-8 \r\n";
//$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //////////////////////////////Pls Delete later

$retval = mail( $to, $subject, $message, $header );

if( $retval == true ){
    echo "Message sent successfully";
}
else{
    echo "Message could not be sent!";
}

【问题讨论】：

你在你的 css 上是否只尝试过 .about{...？
@PedroLobito 先生，我检查了所有这些变化： .ab{... ， td.ab{... 。但是gmail不识别类名。但雅虎显示正确
简短的回答是，对于 HTML 电子邮件，您将需要内联您的 CSS 以获得不同电子邮件客户端之间的一致性。 HTML 电子邮件是出了名的棘手，因为每个电子邮件客户端都会以不同的方式呈现 CSS 和格式。
手动内联 CSS 确实是低效的。你会需要一个预发邮件（有很多，premailer.dialect.ca 就是一个例子）为你做这件事。
@ceejayoz 非常有用的信息。谢谢

标签： php

【解决方案1】：

HTML 电子邮件是出了名的难以纠正；每个电子邮件客户端都会以不同的方式处理样式。引用 Lee Munroe 的Things I've Learned About Building & Coding HTML Email Templates（重点是作者的）：

电子邮件客户端使用不同的渲染引擎来渲染 HTML 电子邮件：

Apple Mail、Outlook for Mac、Android Mail 和 iOS Mail 使用 WebKit

Outlook 2000/02/03 使用 Internet Explorer

Outlook 2007/10/13 使用 Microsoft Word（是的，Word！）

Web 客户端使用其浏览器的相应引擎，例如Safari 使用 WebKit，Chrome 使用 Blink

Gmail 去除<link> 标记和<style> 标记中的任何 CSS，以及任何其他未内联的 CSS。不仅是 Gmail 网页版，还有原生 Gmail 移动应用程序。

为了直接回答您的问题，Gmail 会去除所有 <style> 标记，因此您需要将 CSS 内联到 HTML 元素中。

有一些网络服务可以为您内联 CSS，例如

此外，您可以使用 CssToInlineStyles 等库内联它，以便纯粹在您的代码中处理它。

【讨论】：