html - 在设计电子邮件的 HTML 模板时，我应该知道什么

Question

<分区>

Answer 1

根据经验，第一件事是:当您编写 HTML 电子邮件时，请像回到 90 年代一样编写代码。那就是:表格布局!

将表格中的所有内容都包裹起来

border="0" cellspacing="0" cellpadding="0"

某些邮件客户端支持 CSS，其他邮件客户端则完全支持它。一些客户端只允许内联样式，而不是样式标签。所以最好还是用<font>文本样式标签和已弃用的 bgcolor属性等等。不应使用 CSS 生成元素周围的填充/边距 padding和 margin ，而是使用包含透明 1x1px gif 的空表格单元格。确保将高度应用于 img标签以及 td如果你真的想确定，还有 tr标签。

事情变得越来越好，Gmail 最近进行了更改，允许媒体查询响应，但尚未在全局范围内推广。

因此，由于媒体查询(尚未)在任何地方都适用，而且现在大多数人都在使用移动设备，因此使用“移动优先”方法并在更大的显示器上使用媒体查询来扩展布局并不是一个坏主意。对于 Outlook，您可以使用条件注释(因为它也不支持媒体查询)来实现相同的目的:

<!--[if mso]>
<style>/* style block will only be used in MSO */</style>
<![endif]-->

您还可以定位特定的 Outlook 版本，例如当前的 Windows 10 邮件应用程序是 mso 16 .您可以使用 lte/gte/gt/lt就像早期用于旧 IE 的条件注释一样。

说到 Outlook:在其他一些领域，这也是一种痛苦。为了强制行高并防止一些不需要的空格，有 MSO 特定的样式，如 mso-line-height-alt:0;和 mso-margin-top-alt:1px; ，我建议您也阅读这些内容。

对于列布局，不要使用 float ，而是 align="left"在代表一列的每个表上，“行”中的最后一个表除外(因为这会导致表在 Thunderbird 中漂浮在网格之外的问题)。

根据我的经验，至少如果您是从头开始创建模板，则需要在客户端(网络邮件、桌面和移动设备)中构建、测试、修复、研究一些特定于客户端的事情看起来不像你喜欢的样子，尝试一些自己的尝试来修复它，然后重新测试。