html - Outlook 2010 和 HTML 表格

Question

我只是在创建一些电子邮件时事通讯，我不知道如何强制 outlook 正确显示我的 HTML 表格。

有一个简单的例子:

<table cellpadding="0" cellspacing="0" id="outlookHack" 
   style="table-layout:fixed; border: 0; background-color: #1E6C9D; 
          background-image: url(http://www.komix.cz/upload/img_bg.png); 
          background-repeat: repeat-y; margin-top: 0px; margin-bottom: 0px; 
          padding: 0px; margin-left: auto; margin-right: auto; 
          text-align: center;width: 620px;" width="620">
<tr>
  <td width="10" style="width: 10px; background:inherit;" height="10">&nbsp;</td>
  <td  width="600" style="width: 600px; background:ihnerit;" height="10"></td>
  <td width="10" style="width: 10px; background:inherit;" height="10">&nbsp;</td>
<tr>
<tr>
  <td width="10" style="width: 10px; background: inherit;">&nbsp;</td>
  <td  width="600" style="width: 600px; background: white;">some content...</td>
  <td width="10" style="width: 10px; background: inherit;">&nbsp;</td>
<tr>
</table>

问题是，左右栏的大小应该固定为 10 像素，但 outlook 07/10 将它们呈现为 +/- 5 像素。

Answer 1

KISS -- 保持简单(愚蠢)

Outlook 07-present 使用 Word 的呈现引擎，它基本上是 IE(它是愚蠢的)进一步简化。它迫使您重新编码为 html 1 标准，并且确实限制了您可以做的事情。对于初学者来说，基本上放弃复杂的 CSS。它可以(在线)使用，但大部分都不起作用。看这个document on compatibility

因此，使用兼容性图表，后台支持几乎不存在....失去它。背景重复不受支持，填充也没有得到很好的支持。

现在，如何解决填充问题？您可以使用 cellpadding 来增加空间，但有时会对您不想填充的区域产生不良影响。有些人使用嵌套表来提供必要的填充，使用外部表来控制页面布局，使用内部表来控制段落。请注意，根据文档，边距也受支持，因此您可以在段落上使用边距，放弃 10 像素左右的列，以支持具有 10 像素边距的段落。

另外，请注意您应该避免使用任何速记 CSS，即 border:1px solid #000

谢谢，微软。当您因渲染引擎质量的倒退和对基本标准的普遍回避而让我们 UI 开发人员抓狂时，您也让我们赚了很多额外的钱。