HTML 电子邮件 - Outlook 2007+10，不相关的表格对齐
我遇到了一个以前从未遇到过的困境，这让我很困惑。在设计中，已构建的 Outlook 07 和 10 正在对齐两个完全不相关的表行。这是一个复杂的电子邮件布局，因此包含很多表格。 左列中的内容粘在此处所示的底部（或同级）hr 标签上：
<tr><td height="20"></td></tr>
<tr><!-- start of sidebar product (horizontal)-->
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="170">
<a href="" title="inline product 2" style="text-decoration: none;">
<!-- product Image -->
<img border="0" style="font-family:Arial,Helvetica,sans-serif;display:block" src="sidebar-beer-tbc.jpg" alt="South Island Marlborough Sauvignon Blanc" width="170" height="105">
</a>
...
每列至少有三个父表（当不同的部分相加时），因此应该没有理由渲染引擎正在尝试对齐它们。
任何帮助将不胜感激，这让我束手无策。
由于这是针对客户的并且包含敏感信息，因此我尚未提供最终的文档，但这里是两个比较的带注释的抓取。 https://skitch.com/tilt/r3w65/photoshop
I've got a dilemma that I have never come across before that has stumped me. In a design a have built Outlook 07&10 are aligning two entirely unrelated table rows. This is a complex email layout, and so contains a lot of tables.
The content in the left column is sticking to the bottom (or top of the sibling) hr tag depicted here:
<tr><td height="20"></td></tr>
<tr><!-- start of sidebar product (horizontal)-->
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="170">
<a href="" title="inline product 2" style="text-decoration: none;">
<!-- product Image -->
<img border="0" style="font-family:Arial,Helvetica,sans-serif;display:block" src="sidebar-beer-tbc.jpg" alt="South Island Marlborough Sauvignon Blanc" width="170" height="105">
</a>
...
There is at least three parent tables per column (when the different sections are added up), so there should be no reason why the rendering engine is trying to align them.
Any help would be greatly appreciated, this has got me at my wit's end.
As this is for a client and contains sensitive information, I haven't made available the finished document, but here is an annotated grab of the two comparisons.
https://skitch.com/tilt/r3w65/photoshop
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您遇到了“Outlook 2007 分页错误”。基本上，由于 Outlook 2007/10 使用 Word 渲染引擎，因此它们将其组织为打印而不是屏幕。
如果您遇到 Outlook 无法在其间插入分页符的内容，它只会在其上方插入一个大的空格，以便可以插入分页符。
这真的很烦人 - 唯一的解决方法是在同一位置完全关闭上面的行，插入 100% 宽的内容（可以是透明的 1px 高线），然后在下面再次启动表格。
You've hit the 'Outlook 2007 page break bug'. Basically, because Outlook 2007/10 use the Word rendering engine, they organise it for printing instead of the screen.
If you hit something that Outlook can't insert a page break between, it just inserts a massive space above it to where it can insert a page break.
It's really annoying - the only way around it is to completely close off the rows above at the same place, insert something that's 100% wide (can be a transparent 1px high line), and then start the tables again underneath.
当存在跨度（colspan 或 rowspan）时，Outlook 会执行此操作。虽然其他客户端将跨行和列视为跨行和跨列并在布局方面分开，但 Outlook 会错误地计算它们。这是在 Outlook 中使用愚蠢的 Word 布局引擎的结果——这一决定将电子邮件格式设置为 1995 年——但我离题了。
解决问题的方法是取出有问题的框，而不是使用任何跨度，而是将其放入自己的完整表格中。因此，在您的图像中，左侧的各个饮料将位于 3x3 无跨度桌子中，垂直“产品 TBD”侧边栏将是它自己的 1x4 或任何垂直无跨度桌子。总的来说，这已经为我解决了。另外，有时需要给这些内部表格固定的高度，以防止它们变成
height="100%"并破坏布局（同样，仅在 Outlook 中）。Outlook does this when there are spans (colspan or rowspan). While other clients treat spanned rows and columns and separate in terms of layout, outlook will calculate them incorrectly. It's the result of the use of the idiotic Word layout engine in outlook -- a decision that has set email formatting back to 1995 -- but I digress.
The solution to your problem is to take the offending boxes and instead of using any spans, make it into its own complete table. So in your image, the individual drinks on the left will be in a 3x3 unspanned table, and the vertical "product TBD" sidebar would be it's own 1x4 or whatever vertical unspanned table. In general, this has solved it for me. Also, sometimes it's necessary to give these inner tables a fixed height to prevent them from becoming
height="100%"and breaking the layout (again, only in outlook).