从MS Outlook发送HTML邮件签名时出现多余空白问题求助

兄弟，我太懂你在Outlook里搞HTML签名的痛苦了——这货用的是Word的渲染引擎，跟正经浏览器完全不是一个路子，多余空白简直是家常便饭。你的代码里有几个典型的坑，我帮你捋一捋，改完应该就能解决问题：

1. 简化嵌套表格，强制消除表格边距 #

Outlook会给嵌套表格自动添加额外的边距，而且默认的cellspacing/cellpadding有时候不管用，得加上MSO专属样式强制清零。把多余的嵌套表格合并，给所有表格加上mso-table-lspace:0pt; mso-table-rspace:0pt;样式。

2. 替换 为精确的高度控制 #

你用 加空行的方式在Outlook里会被渲染成额外空白，直接用单元格的height属性配合line-height:0;和font-size:0;来控制间距，不需要占位符文本。

3. 强制行高精确性 #

Outlook对line-height的处理很随意，要加上mso-line-height-rule: exactly;来让行高严格按照设置的值渲染，避免自动撑开空白。

4. 修复不完整的MSO条件注释 #

你的代码末尾有个未闭合的<!--[if mso]>，这会导致渲染异常，必须补全闭合标签。

修改后的完整代码 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="date=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>Boating World</title>
    <style type="text/css" media="screen">
        /*<![CDATA[*/
        body {
            padding: 0 !important;
            margin: 0 !important;
            display: block !important;
            background: #ffffff;
            -webkit-text-size-adjust: none;
            mso-line-height-rule: exactly;
        }
        table {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
            border-collapse: collapse !important;
        }
        /*]]>*/
    </style>
</head>
<body style="padding:0 !important; margin:0 !important; display:block !important; background:#ffffff; -webkit-text-size-adjust:none; mso-line-height-rule:exactly;">
    <table width="500" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr>
            <td align="left" valign="top">
                <!-- 问候语区域 -->
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td style="font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight:bold; line-height:18px; mso-line-height-rule:exactly;">
                            Kind Regards
                        </td>
                    </tr>
                    <tr>
                        <td height="5" style="font-size:0px; line-height:0px;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="font-family:Arial, sans-serif; font-size:16px; color:#002855; font-weight:600; line-height:20px; text-transform:uppercase; font-stretch:semi-expanded; mso-line-height-rule:exactly;">
                            ELZAAN STEENKAMP
                        </td>
                    </tr>
                    <tr>
                        <td height="10" style="font-size:0px; line-height:0px;">&nbsp;</td>
                    </tr>
                    <!-- 水平线 -->
                    <tr>
                        <td height="1" bgcolor="#909090" style="font-size:0px; line-height:0px;"></td>
                    </tr>
                    <tr>
                        <td height="5" style="font-size:0px; line-height:0px;">&nbsp;</td>
                    </tr>
                    <!-- 联系方式区域 -->
                    <tr>
                        <td>
                            <table width="200" align="left" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:22px; mso-line-height-rule:exactly;">
                                        T: <span style="font-weight:100; color:#444444;">
                                            <a href="#" style="text-decoration:none; color:#444444; cursor:default;">+27 (0) 21 418 0840</a>
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:22px; mso-line-height-rule:exactly;">
                                        C: <span style="font-weight:100; color:#444444;">
                                            <a href="#" style="text-decoration:none; color:#444444; cursor:default;">+27 (0) 83 400 3418</a>
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:22px; mso-line-height-rule:exactly;">
                                        E: <span style="font-weight:100; color:#444444;">
                                            <a href="mailto:accounts@boatingworld.co.za" style="text-decoration:none; color:#444444; cursor:default;">accounts@boatingworld.co.za</a>
                                        </span>
                                    </td>
                                </tr>
                            </table>
                            <!-- MSO 间距占位 -->
                            <!--[if mso]>
                            <table align="left" width="20" border="0" cellspacing="0" cellpadding="0">
                                <tr><td height="22">&nbsp;</td></tr>
                            </table>
                            <![endif]-->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

导入Outlook的注意事项 #

1. 把修改后的代码保存为.html文件，编码选UTF-8
2. 打开Outlook的签名编辑器，不要直接粘贴代码，而是选择插入文件，选中你保存的HTML文件
3. 保存后发送测试邮件，查看渲染效果（最好用Outlook客户端测试，网页版可能不一样）

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