基于表格开发的HTML邮件签名在旧版Outlook中渲染异常求助

问题核心原因 #

• 底部图片结构错误：直接将<img>标签嵌套在<table>标签内，缺少<tr>、<td>包裹，旧版Outlook使用的Word渲染引擎无法识别该结构，会直接导致图片错位。同时主容器宽度为600px，底部图片设置为640px超出容器宽度，会撑破布局。
• MSO条件注释语法错误：代码末尾的MSO闭合注释语法存在错误，导致为Outlook专门写的600px固定宽表格未正确闭合，布局直接错乱。
• 宽度属性冲突：包含两列布局的<td>同时设置了width: 600px和width: 100%，旧版Outlook解析时优先级判断异常，会导致列宽计算错误。
• 字体渲染异常：引入的Google字体Poppins在旧版Outlook中默认未安装，未给文字添加冗余的格式锁定属性，容易出现文字撑开列宽的问题。

修正后完整代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>HTML Email Template Boilerplate</title>
<style type='text/css'>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
body {Margin: 0;padding: 0;}
table {border-spacing: 0;}
td {padding: 0;}
img {border: 0;}
p {margin: 0;padding: 0;}
@media screen and (max-width:599.98px) {}
@media screen and (max-width:399.98px) {}
:root {color-scheme: light dark;supported-color-schemes: light dark;}
@media (prefers-color-scheme: dark) {}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse!important;}
</style>
<![endif]-->
<!-- FIXES 120 DPI-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="Margin: 0;padding:0;min-width: 100%;background-color:#ffffff;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color: #ffffff !important;}
body, table, p, a, td {font-family:Arial,Helvetica,sans-serif!important;}
</style>
<![endif]-->
<div style="max-width: 600px; background-color: #ffffff;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-spacing:0;color: #000000;" role="presentation">
<tr>
<td style="padding:0;">
<![endif]-->
<!-- MAIN TABLE START -->
<table align="center" style="border-spacing:0; border-collapse: collapse; color: #000000;font-family: sans-serif, Arial, Helvetica!important;background-color: #ffffff; Margin:0; padding: 0;max-width: 600px;" role="presentation">
<tr>
<td style="padding: 50px 0 30px 0; background-color: #f8f8f8;">
<table width="600" style="width: 600px; border-spacing: 0; border-collapse: collapse;" role="presentation">
<tr>
<td width="600" style="padding: 0; font-size: 0; text-align: center; max-width: 600px;">
<!--[if mso]>
<table width="600" style="border-spacing: 0;border-collapse:collapse; width:600px;" role="presentation">
<tr>
<td width="300" align="right" valign="middle" style="padding:0;">
<![endif]-->
<table class="column" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; max-width: 300px; display: inline-block;" role="presentation">
<tr>
<td  class="padding" style="padding: 10px;">
<table class="content" align="right" style="border-spacing: 0;border-collapse: collapse;" role="presentation">
<tr>
<td style="padding: 0 0 12px 0; font-size: 24px; text-align: right;font-weight: 600;font-family: 'Poppins', Helvetica, Arial,sans-serif !important;mso-line-height-rule:exactly; line-height: 24px;mso-text-raise: 0;">
<span style="font-size: 24px; margin:0;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 600;" class="name">Firstname Surname</span>
</td>
</tr>
<tr>
<td style="padding: 0; font-size: 24px; text-align: right;font-weight: 600;font-family: 'Poppins', Helvetica, Arial,sans-serif !important;mso-line-height-rule:exactly; line-height: 24px;mso-text-raise: 0;">
<span style="font-size: 24px; margin:0;color: #FF8672; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 600;" class="job">Job Title</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td width="300" valign="middle" style="padding:0;">
<![endif]-->
<table class="column" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; max-width: 300px; display: inline-block;" role="presentation">
<tr>
<td class="padding" style="padding: 10px">
<table class="content" style="border-spacing: 0;border-collapse: collapse; text-align: left;" role="presentation">
<tr>
<td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;mso-text-raise:0;">
<a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="mailto:firstname@productprofessionals.com">firstname@productprofessionals.com</a>
</td>
</tr>
<tr>
<td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;mso-text-raise:0;">
<a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="tel:+61 444 123 456">+61 444 123 456</a>
</td>
</tr>
<tr>
<td style="padding: 0;font-size: 16px;color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif !important; font-weight: 400;mso-text-raise:0;">
<a style="color: #2F3F5A; mso-line-height-rule:exactly; line-height: 24px; text-decoration: none; font-family: 'Poppins', Helvetica, Arial,sans-serif; font-weight: 400;" href="https://productprofessionals.com" target="_blank">productprofessionals.com</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- BOTTOM IMAGE START -->
<tr>
<td style="padding: 0;" cellspacing="0" cellpadding="0">
<table width="100%" style="padding: 0; border-spacing: 0; border-collapse: collapse;" role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:0;font-size:0;line-height:0;">
<img src="https://i.ibb.co/CnTF0HJ/Group-584-4.png" width="600" style="width: 100%; max-width:600px; display: block;" border="0" alt="Association of Product Professionals">
</td>
</tr>
</table>
</td>
</tr>
<!-- BOTTOM IMAGE END -->
</table>
<!-- MAIN TABLE END -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>

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