Question

用户在对表单进行更改时会收到电子邮件。我想使用twitter bootstrap以更易读的格式显示信息。令我惊讶的是，样式text-info正确显示，但不显示表格样式。这是语法错误还是与ColdFusion用于创建电子邮件的HTML呈现引擎类型有关？我正在使用Outlook查看电子邮件。

下面我尝试了：

<cfmail from="test.com" to="me.com" subject="tester" type="html">
 <html>
  <head>
   <!---<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">--->
  </head>
   <body>
    <style type="text/css">

     <cfinclude template="/bootstrap/css/bootstrap.min.css">
    </style>

     <!--- Start comparing --->
    <p class="text-info">
      Has updated the following Project Information for Project
     </p>

     <table class="table table-striped" style="width: 600px">
    <tr>
     <th>Field</th>
     <th>Original</th>
     <th>Modified</th>
    </tr>

     <cfif compare(xOrig,xMod) IS NOT 0>
      <tr>
       <td>Field1</td>
       <td>#xOrig</td>
       <td>#xMod#</td>
      </tr>
     </cfif>

      </table>
     </body>
    </html>
</cfmail>

Answer 1

包含外部样式表以呈现电子邮件不是最佳做法，事实上，当电子邮件客户端忽略或删除它时，它甚至不能用于您想要做的绝大多数事情。

要有效地呈现样式化的电子邮件，您需要内联编写CSS，即使是在电子邮件正文的头部也是如此。例如：

<p style="color:#000;"></p>

使用内联样式将为您带来最好的效果。使用MailChimp中的以下资源作为指南：Mailchimp HTML Email Templates

Answer 2

无论是包含文件内容还是通过URL引用样式表，都应始终在样式标记中添加样式。虽然您可能会将它们放入体内，但HTML渲染引擎之间可能会出现不一致的行为。

我个人会在您注释时使用链接标记。但是，由于电子邮件不在您的Web服务器上，您必须使用绝对引用，而不是相对的引用：

<link href="http://www.mysite.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">

在cfmail中包含bootstrap

2 个答案: