Outlook 2010 和 HTML 表格
我只是创建一些电子邮件通讯，我无法弄清楚如何强制 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"> </td>
<td width="600" style="width: 600px; background:ihnerit;" height="10"></td>
<td width="10" style="width: 10px; background:inherit;" height="10"> </td>
<tr>
<tr>
<td width="10" style="width: 10px; background: inherit;"> </td>
<td width="600" style="width: 600px; background: white;">some content...</td>
<td width="10" style="width: 10px; background: inherit;"> </td>
<tr>
</table>
问题是，左列和右列应该具有 10px 的固定大小，但 Outlook 07/10 将它们呈现为 +/- 5px。
I am just creating some email newsletter, and I cannot figure out how force outlook to display my HTML table corectly.
There is simple example:
<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"> </td>
<td width="600" style="width: 600px; background:ihnerit;" height="10"></td>
<td width="10" style="width: 10px; background:inherit;" height="10"> </td>
<tr>
<tr>
<td width="10" style="width: 10px; background: inherit;"> </td>
<td width="600" style="width: 600px; background: white;">some content...</td>
<td width="10" style="width: 10px; background: inherit;"> </td>
<tr>
</table>
The problem is, that left and right columns should have fixed size of 10px, but outlook 07/10 renders them as +/- 5px.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
KISS - 保持简单（愚蠢）
Outlook 07-present 使用Word 的渲染引擎，它基本上是IE（它是愚蠢的）进一步简化。它迫使您重新编码到 html 1 标准，并且确实限制了您可以做的事情。对于初学者来说，基本上放弃复杂的 CSS。它可以使用（内联），但其中大部分不起作用。请参阅此有关兼容性的文档
因此，使用兼容性图表，后台支持几乎不存在...... .失去它。不支持背景重复，并且填充也没有得到很好的支持。
现在，如何解决您的填充问题？您可以使用单元格填充来添加空间，但这有时会对您不希望填充的区域产生不良影响。有些人使用嵌套表来提供必要的填充，使用外部表来控制页面布局，使用内部表来控制段落。请注意，根据文档，还支持边距，因此您可以在段落上使用边距，放弃 10 像素的左列和右列，转而使用具有 10 像素边距的段落。
另请注意，您应该避免使用任何简写 CSS，即
border:1pxsolid #000谢谢，Microsoft。虽然您的渲染引擎质量下降和对基本标准的普遍回避让我们 UI 开发人员疯狂，但您也为我们赚了很多额外的钱。
KISS -- Keep it simple (stupid)
Outlook 07-present uses Word's rendering engine, which is basically IE (which is dumb) further dumbed down. It forces you to code back to html 1 standards, and really limits what you can do. For starters, basically give up on complex CSS. It can be used (in-line) but much of it doesn't work. See this document on compatibility
So, using the compatibility chart, background support is almost non-existent....lose it. Background repeats are unsupported, and padding isn't really very well supported either.
Now, how to solve your padding problem? You could use cellpadding to add space, but that sometimes has undesirable effects on areas you don't want padded. Some people use nested tables to provide the necessary padding, using the outer to control the page layout and the inner table(s) to control the paragraph. Note that margins are also supported according to the doc, so you could use margins on paragraphs, ditching the 10 pixel left and right columns in favor of a paragraph with 10 pixel margins.
Also, note that you should avoid any shorthand CSS, i.e.
border:1px solid #000Thanks, Microsoft. While you're driving us UI Developers crazy with your regressing rendering engine quality and general avoidance of basic standards, you're also making us a lot of extra money.