不幸的是,转发一封电子邮件会导致一个客户端重新渲染已经渲染的 HTML,这几乎总是会搞砸一些事情。但是,在编码电子邮件时使用更好的做法将有助于减少这些问题。我写了很多电子邮件,以下是我学到的一些东西:
永远不要使用行跨度或列跨度。这些往往会在电子邮件客户端和转发时迅速分解。而是使用嵌套表。
如果您有项目符号列表,请使用无序列表 (ul),或者如果您必须使用 2 列表格,每个列表项都有一行,并将 • 放在每个项目的第一列中。
远离 p 标签,它们在电子邮件客户端之间的间距不一致。使用 2 个 br 标签可以为您提供大致相同的空间。
使用填充来控制元素的间距而不是边距。同样,不是很一致,事实上,我不确定它是否有效。
超级脚本元素通常会将它们所在的行向下推(或向上的行)。使用 line-height:0 的内联样式;解决这个问题。但是请注意,转发时仍然会发生这种情况。如果您使用脚注并且只需要上标几个数字,请使用 HTML 实体 ¹ , ² , 和 ³.
Outlook 2007-2013 for Windows 不支持背景图像。它们似乎适用于 Outlook Mac 和许多其他客户端,但如果您需要支持 Outlook for Windows,请不要打扰它们。
找到一个可靠的模板来使用并始终从它开始。这应该包括旨在解决 Web、桌面和电子邮件客户端问题的头部样式。以下是我经常使用的一些:
身体{宽度:100%!重要;-webkit-文本大小调整:100%;-ms-文本大小调整:100%;边距:0;填充:0;} a:link { 颜色 : #1d3666; 文字装饰:下划线;} a:visited { 颜色 : #1d3666; 文字装饰:下划线;} a:hover { 颜色 : #a43232; 文字装饰:无;} 表 { 边框折叠:折叠;mso-table-lspace:0pt;mso-table-rspace:0pt;} 表 td { 边框折叠:折叠;} img { 大纲:无;文字装饰:无;-ms-插值模式:双三次;} 一个 img { 边框:无;显示:块;}
虽然 Gmail、Yahoo、Outlook.com 和 AOL 等 Web 客户端可能会从您的电子邮件中剥离头部和任何内部样式,但对于大多数移动邮件客户端用户和 Outlook 和 Thunderbird 等桌面电子邮件客户端来说,这些都将通过这些样式旨在解决什么问题。对于其他所有内容,请使用内联样式。
Also, it looks like you created this using Fireworks. That might work for a web page, but email has a lot of pitfalls and limitations that FW probably does not account for. I'd recommend either using Dreamweaver or some other helpful text editor and do it using HTML with inline styles.