我的 HTML/CSS 电子邮件中的问题答案

【问题标题】：Issue in my HTML/CSS email我的 HTML/CSS 电子邮件中的问题
【发布时间】：2012-09-27 16:33:26
【问题描述】：

我知道当我使用 HTML 电子邮件时，我必须使用表格布局。这就是我所做的here 不幸的是，当我用这个online tool 对我的Hotmail 和gmail 进行一些测试时，布局并不完全相同。在电子邮件中，与我的HTML code 的区别在于它在文本 <h2>"Responda correctamente a las preguntas y gane un viaje a Roma!"</h2> 中没有获得相同的 H2 字体样式和系列，并且第二张图片与顶部的图片和一个在底部。解决问题的最佳解决方案是什么？我怎样才能实现相同的布局？

感谢您的宝贵时间

【问题讨论】：

在制作 HTML 电子邮件和普通 html 页面时，您需要做很多不同的事情，这里有一些见解：catswhocode.com/blog/best-practices-for-coding-html-emails
另一件非常重要的事情是没有换行符的大行文本。尝试使每行的最大字符数为 65 并中断所有行。一些电子邮件服务器和客户端会在某些行长处撕掉/删除一些字符，从而破坏您的布局。

标签： html email html-email

【解决方案1】：

不要依赖外部 (<link rel="stylesheet">) 或嵌入式样式表（包含在 <body> 标记上方的 <style> 标记中的样式表）。这是要避免的最重要的事情。许多电子邮件服务会删除正文标签上方的所有内容并禁用外部样式表。也就是说，您可以包含一些嵌入式 CSS 语句（例如链接颜色），只要您同意它们不在某些电子邮件客户端中呈现即可。

品尝这篇文章：http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters

【讨论】：

好的，我已经使用这个工具premailer.dialect.ca 不依赖任何外部 css 表并让电子邮件服务在我的身体下方阅读。我得到了更好的结果！但它仍然不完全相同:(

【解决方案2】：

尝试将style="display:block;" 添加到所有 img 标签中，而不是 h2 使用带有 style 属性的字体标签：

<font style="color:#202020; font-family: 'Georgia',serif; font-size: 14px; line-height: 20px;">
    <b>Some title</b>
</font>
<br>

【讨论】：

我非常接近实现它，这是我的新代码jsbin.com/opokac/1/edit 由 premailer.dialect.ca 生成，但是除了非常接近之外看起来仍然不一样。变得更好，但不是还是一样。我添加了 style="display:block;"但情况更糟