1

对表单进行更改后，用户会收到一封电子邮件。我想使用 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>
4

2 回答 2

3

包含外部样式表来呈现电子邮件并不是最佳实践，事实上它甚至不适用于您想要做的绝大多数事情，因为电子邮件客户端会忽略或删除它。

为了有效地呈现样式化的电子邮件，您需要内联编写 CSS，甚至不在电子邮件正文的头部。例子：

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

使用内联样式将为您带来最大的收益。使用 MailChimp 上的以下资源作为指南：Mailchimp HTML 电子邮件模板

于 2012-11-10T22:36:30.323 回答
2

无论是包含文件内容还是通过 URL 引用样式表，您都应该始终将样式放在 head 标签中。虽然您可能不会将它们放在正文中，但您可能会在 HTML 渲染引擎之间获得不一致的行为。

当您注释掉时，我会亲自使用链接标签。但是，由于电子邮件不在您的 Web 服务器上，因此您必须使用绝对引用，而不是相对引用：

<link href="http://www.mysite.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
于 2012-11-10T01:08:59.073 回答