HTML 电子邮件布局在转发时中断 - 使其在 Word 2003 HTML 编辑器中幸存
我老板的客户抱怨说，当转发一些 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 编辑器出了什么问题？为什么？它会剥离一些标签吗？添加一些标签会搞砸吗？有什么我可以做的吗？
我已经无计可施了！感谢您的帮助
My boss's clients are complaining that when some HTML newsletters are forwarded, their table-based layout breaks. I have determined that this is most likely caused by using the following option in Outlook:
Tools > Options > Mail Format > Use Microsoft Office Word 2003 to edit e-mail messages
My boss refuses to change this option and is demanding that I figure out a work-around. But I'm plain stumped. The e-mail that is breaking when forwarded with this option on is at http://www.egusts.com/stratham/stanford-square/10-0826/new/
Here's what happens when the Word 2003 HTML editor is done with it. No edits, just hit "forward" with that option selected - http://www.egusts.com/stratham/stanford-square/10-0826/new/alt/
Here's an example that my boss forwarded me that makes it through just fine - http://www.egusts.com/stratham/stanford-square/10-0826/new/example.html
But I'm still really stumped. I have no clue what to do. I had thought my original template's table-html was really simple and straight-forward. What's breaking in the Word 2003 Editor? Why? Is it stripping some tags? Adding some tags that screws it up? Is there anything I can do?
I'm at my wits end! Thanks for the help
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不幸的是，转发电子邮件会导致客户端重新渲染已经渲染过的 HTML，这几乎总是会搞砸一些事情。但是，在对电子邮件进行编码时使用更好的做法将有助于减少这些问题。我已经处理了很多电子邮件，以下是我学到的一些东西：
永远不要使用行跨度或列跨度。这些在电子邮件客户端和转发时往往会很快崩溃。而是使用嵌套表。
如果您有项目符号列表，请使用无序列表 (ul)，或者如果您必须使用 2 列表格，每个列表项对应一行，并将 • 放在每个项目的第一列中。
远离 p 标签，它们在电子邮件客户端之间的间距不一致。使用 2 个 br 标签可以为您提供大致相同的空间量。
使用 padding 来控制元素的间距，而不是使用 margin。再说一次，不是很一致，事实上，我不确定它是否有效。
超级脚本元素通常会将它们所在的行向下推（或将上面的行向上推）。使用 line-height:0 的内联样式；解决这个问题。但请注意，转发时仍然会发生这种情况。如果您使用脚注并且只需要为几个数字添加上标，请使用 HTML 实体 ¹ , ² 、和³。
Windows 版 Outlook 2007-2013 不支持背景图像。它们似乎适用于 Outlook Mac 和许多其他客户端，但如果您需要支持 Outlook for Windows，则不必理会它们。
找到一个可靠的模板来使用，并始终以此为起点。这应该包括头部的样式，旨在解决网络、桌面和电子邮件客户端的问题。以下是我经常使用的一些：
正文{
宽度：100%！重要；
-webkit-文本大小调整：100%；
-ms-文本大小调整：100%；
保证金：0；
填充：0；
}
一个：链接{
颜色：#1d3666；
文本装饰：下划线；
}
a：访问过{
颜色：#1d3666；
文本装饰：下划线；
}
一个：悬停{
颜色：#a43232；
文本装饰：无；
}
桌子 {
边框折叠：折叠；
mso-表-lspace:0pt;
mso-表-rspace:0pt;
}
表 td {
边界崩溃：崩溃；
}
图像{
大纲：无；
文本装饰：无；
-ms-插值模式：双三次；
}
一个图片{
边框：无；
显示：块；
}
Gmail、Yahoo、Outlook.com 和 AOL 等 Web 客户端可能会从您的电子邮件中删除头部和任何内部样式，但大多数移动邮件客户端用户以及 Outlook 和 Thunderbird 等桌面电子邮件客户端都可以使用这些内容。这些风格旨在解决的问题。对于其他一切，请使用内联样式。
另外，看起来您是使用 Fireworks 创建的。这可能适用于网页，但电子邮件有很多 FW 可能没有考虑到的陷阱和限制。我建议使用 Dreamweaver 或其他一些有用的文本编辑器，并使用带有内联样式的 HTML 来完成此操作。
Unfortunately, forwarding an email causes one client to re-render HTML that has already been rendered, and this will almost always screw something up. However, using better practices when coding your emails will help cut down on these problems. I've done a lot of emails and here are some things I've learned:
Never use rowspans or colspans. These tend to break down quickly across email clients and when forwarded. Instead use nested tables.
If you have a bulleted list, use either an unordered list (ul), or if you must use a 2 column table with a row for each list item and put the • in the first column for each item.
Stay away from p tags, they have inconsistent spacing across email clients. Using 2 br tags can give you roughly the same amount of space.
Use padding to control the spacing of elements instead of margin. Again, not very consistent, in fact, I'm not sure it works at all.
Super scripted elements will usually push the line they are on down (or the lines above up). Use an inline-style of line-height:0; to fix that. Note, however, this will still happen when forwarded. If you're using footnotes and need to superscript just a few numbers, use the HTML entities ¹ , ² , and ³.
Background images are not supported in Outlook 2007-2013 for Windows. They seem to work for Outlook Mac, and a lot of other clients, but don't bother with them if you need to support Outlook for Windows.
Find a reliable template to use and always start with that. This should include styles in the head aimed at fixing problems with web, desktop, and email clients. Here are some I usually use:
body {
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}
a:link {
color : #1d3666;
text-decoration : underline;
}
a:visited {
color : #1d3666;
text-decoration : underline;
}
a:hover {
color : #a43232;
text-decoration : none;
}
table {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table td {
border-collapse: collapse;
}
img {
outline:none;
text-decoration:none;
-ms-interpolation-mode: bicubic;
}
a img {
border:none;
display:block;
}
While web clients like Gmail, Yahoo, Outlook.com, and AOL will probably strip the head and any internal styles out of your email, these will come through for most mobile mail client users and for desktop email clients like Outlook and Thunderbird, which are what these styles aim to fix for. For everything else, use inline styles.
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.
我发现，除了使用透明间隔 GIF 之外，我还需要为每个容纳间隔 GIF 的 s 指定一个“宽度”。
这解决了大部分布局问题，尽管在 Outlook 中使用该选项集转发电子邮件会注入许多其他丑陋的代码，这些代码可能会搞砸。
I figured out that, in addition to using transparent spacer GIFs, I needed to specify a "width" for each of the s that housed the spacer GIFs.
That solved most of the layout problems, although forwarding an e-mail in outlook with that option set injects a lot of other ugly code that can screw things up.