为什么使用HTML表格制作的邮件内容在邮件客户端显示异常？

以下是针对Windows版Outlook渲染异常的核心原因和对应修复方案，Windows版Outlook采用Word作为渲染引擎，兼容性远低于浏览器和Mac版Outlook，很多常规CSS属性不支持：

1. 圆角不生效问题 #

Windows全版本Outlook均不支持border-radius属性，无论加在table还是td标签上都无效。如果必须保留圆角效果，只能通过切对应位置的圆角背景图实现，纯CSS无法实现该效果。

2. 图片被裁切问题 #

• 所有宽度、高度属性不得使用小数像素，你代码中存在width="229.5"这类小数尺寸，Word渲染引擎对小数像素解析逻辑异常，会导致尺寸计算错误撑破或压缩单元格，所有尺寸需改为整数像素。
• 你给td设置了固定height="165"，同时添加了padding-bottom:15px，Outlook计算单元格高度时不会自动包含padding值，会压缩内容区域导致图片超出高度被裁切。建议要么把td高度设置为「图片高度+上下padding+文字高度」的总整数高度，要么直接删除td的固定height属性，让内容自动撑开单元格高度。
• cellpadding、cellspacing是table的原生属性，不能写在style内，你写在style中的cellpadding:10完全不生效，需要将这两个属性放到table标签上，示例：<table cellpadding="10" cellspacing="0" 其他属性...>，单元格内边距生效后会预留足够空间避免图片被裁切。
• 部分属性写法不规范，比如你代码中存在<td valign: bottom align="center"的写法，valign是原生属性，正确写法为valign="bottom"，错误的属性语法会导致Outlook无法识别垂直对齐规则，引发排版偏移。
• 所有img标签需要添加style="display:block;margin:0 auto;"属性，Outlook会给img默认添加下方3-5px的空白边距，累积后会导致内容超出单元格，display:block可以清除默认边距，margin:0 auto实现图片居中。

3. 部分内容不显示问题 #

你代码中存在相对路径的图片链接，比如src="emailmarketer.png"，所有邮件客户端均不支持相对路径资源，必须替换为完整的、公网可访问的http/https绝对路径。

其他兼容性优化建议 #

• 所有数值单位不得省略，你代码中存在width:40这类未加单位的属性，Outlook会识别错误，需补全px单位。
• 你设置的line-height: .6过小，Outlook对极小行高的解析异常，会导致文字被裁切，建议至少调整为1或1.2，单位可选pt或px。
• border属性写法需补全样式，你当前写的border:1px white缺少边框样式，建议修改为border:1px solid #ffffff，避免部分客户端无法识别边框规则。

内容的提问来源于stack exchange，提问作者Monica