9

我老板的客户抱怨说,当转发一些 HTML 时事通讯时,他们基于表格的布局会中断。我已经确定这很可能是由于在 Outlook 中使用以下选项引起的:

工具 > 选项 > 邮件格式 > 使用 Microsoft Office Word 2003 编辑电子邮件

我的老板拒绝改变这个选项,并要求我想出一个变通办法。但我很困惑。使用此选项转发时中断的电子邮件位于http://www.egusts.com/stratham/stanford-square/10-0826/new/

下面是 Word 2003 HTML 编辑器完成后会发生的情况。没有编辑,只需点击“前进”并选择该选项 - http://www.egusts.com/stratham/stanford-square/10-0826/new/alt/

这是我的老板转发给我的一个例子,它可以很好地完成 - http://www.egusts.com/stratham/stanford-square/10-0826/new/example.html

但我仍然很困惑。我不知道该怎么做。我原以为我的原始模板的 table-html 非常简单直接。Word 2003 编辑器出现什么问题?为什么?它是在剥离一些标签吗?添加一些将其搞砸的标签?有什么我可以做的吗?

我无计可施!谢谢您的帮助

4

2 回答 2

19

不幸的是,转发一封电子邮件会导致一个客户端重新渲染已经渲染的 HTML,这几乎总是会搞砸一些事情。但是,在编码电子邮件时使用更好的做法将有助于减少这些问题。我写了很多电子邮件,以下是我学到的一些东西:

  1. 永远不要使用行跨度或列跨度。这些往往会在电子邮件客户端和转发时迅速分解。而是使用嵌套表。

  2. 如果您有项目符号列表,请使用无序列表 (ul),或者如果您必须使用 2 列表格,每个列表项都有一行,并将 • 放在每个项目的第一列中。

  3. 远离 p 标签,它们在电子邮件客户端之间的间距不一致。使用 2 个 br 标签可以为您提供大致相同的空间。

  4. 使用填充来控制元素的间距而不是边距。同样,不是很一致,事实上,我不确定它是否有效。

  5. 超级脚本元素通常会将它们所在的行向下推(或向上的行)。使用 line-height:0 的内联样式;解决这个问题。但是请注意,转发时仍然会发生这种情况。如果您使用脚注并且只需要上标几个数字,请使用 HTML 实体 ¹ , ² , 和 ³.

  6. Outlook 2007-2013 for Windows 不支持背景图像。它们似乎适用于 Outlook Mac 和许多其他客户端,但如果您需要支持 Outlook for Windows,请不要打扰它们。

  7. 找到一个可靠的模板来使用并始终从它开始。这应该包括旨在解决 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.

于 2013-08-06T22:04:12.243 回答
1

我发现,除了使用透明间隔 GIF 之外,我还需要为每个包含间隔 GIF 的 s 指定一个“宽度”。

这解决了大多数布局问题,尽管使用该选项集在 Outlook 中转发电子邮件会注入许多其他丑陋的代码,这些代码可能会搞砸。

于 2010-09-11T00:29:07.803 回答