Outlook中HTML邮件签名出现行间空白间隙问题求解

问题原因 #

微软Outlook使用Word内核渲染HTML内容，对CSS的支持度远低于Chrome、Gmail使用的现代浏览器内核，会默认给表格行、文本节点添加额外的内置边距，这是仅在Outlook出现行间隙的核心原因。

修复方案 #

你需要在原有代码基础上补充Outlook专属的兼容属性，修改后的完整代码如下：

<table cellpadding="0" cellspacing="0" border="0" style="mso-table-lspace:0;mso-table-rspace:0;margin:0;padding:0">
<tr style="margin:0;padding:0">
    <td valign="bottom" style="padding-left:10px; padding-bottom:15px; line-height:20px;mso-line-height-rule: exactly;margin:0;">
        <table cellpadding="0" cellspacing="0" border="0" style="mso-table-lspace:0;mso-table-rspace:0;margin:0;padding:0" >
            <tr style="margin:0;padding:0">
                <td  valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:28px; font-size: 25px;color:#000;mso-line-height-rule: exactly;margin:0;padding:0; ">   
                    <strong style="color: #C40F10">Amy Strom</strong>
                </td>
            </tr>
            <tr style="margin:0;padding:0">
                <td  valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;color:#393934;mso-line-height-rule: exactly;margin:0;padding:0; ">
                    Property Manager
                </td>
            </tr>
            <tr style="margin:0;padding:0">
                <td  valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;white-space:nowrap;color: #393934;mso-line-height-rule: exactly;margin:0;padding:0; ">
                    P:&nbsp;<a href="tel:+61894942606" style="text-decoration:underline;color: #393934;text-decoration: none;margin:0;padding:0;">(08)&nbsp;9494&nbsp;2606</a>
                </td>
            </tr>
            <tr style="margin:0;padding:0">
                <td  valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;white-space:nowrap;mso-line-height-rule: exactly;margin:0;padding:0; ">
                    E:&nbsp;<a href="mailto:pm3@semplepg.com.au" style="text-decoration: none; color: #393934;margin:0;padding:0;">pm3@semplepg.com.au</a>
                </td>
            </tr>
            <tr style="margin:0;padding:0">
                <td  valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;white-space:nowrap;mso-line-height-rule: exactly;margin:0;padding:0; ">
                    <a href="https://goo.gl/maps/TE3mL2dZiA2pmk7P7" style="text-decoration: none; color: #393934;margin:0;padding:0;">1/752 North Lake Road, South Lake WA 6164</a>
                </td>
            </tr>
            <tr style="margin:0;padding:0">    
                <td  valign="top" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; line-height:20px; font-size: 16px;white-space:nowrap;mso-line-height-rule: exactly;margin:0;padding:0; ">
                    <a href="https://www.semplepg.com.au/" style="text-decoration: none; color: #C40F10;margin:0;padding:0;">www.semplepg.com.au</a>
                </td>
            </tr>
        </table>
    </td>
    <td  valign="top"  style="padding: 2px 0 0 20px; text-align:center;margin:0;" valign="bottom">
        <a href="https://www.semplepg.com.au/" style="margin:0;padding:0;">
            <img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/6177c1e3331ea605e1a4d562_AmyStrom.jpg" alt="Amy's photo from Semple Property" width="250" style="width:250;font-family: sans-serif; color: #ffffff; display: block; border: 0px;margin:0;padding:0;">
        </a> 
    </td>
</tr>
<tr style="margin:0;padding:0">
    <td  valign="top"  style="background-color:#3C3C3B; padding: 5px 20px 5px 10px; font-size:0px; line-height:0; text-align:left;mso-line-height-rule: exactly;margin:0; ">
        <a href="mailto:semple@semplepg.com.au" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;margin:0;padding:0;padding-right:5px;">
            <img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61d5150d56c5f0bb75b_mail.png" alt= "email icon" height="35" style="height: 35px;display:block;margin:0;padding:0;">
        </a>
        
        <a href="https://au.linkedin.com/company/semplepropertygroup" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;margin:0;padding:0;padding-right:5px;">
            <img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61ead014f5bfb8600fe_linkedin.png" alt= "Linkedin icon" height="35" style="height: 35px;display:block;margin:0;padding:0;">
        </a>
        
        <a href="https://www.youtube.com/channel/UCgSovBlmEFHzyXx-bW9vEbw" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;margin:0;padding:0;padding-right:5px;">
            <img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61d4f490af276680554_youtube.png" alt= "Youtube icon" height="35" style="height: 35px;display:block;margin:0;padding:0;">
        </a>
        
        <a href="https://www.facebook.com/semplepropertygroup" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;margin:0;padding:0;padding-right:5px;">
            <img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61d541a51c3b0433623_fb.png" alt= "Facebook icon" height="35" style="height: 35px;display:block;margin:0;padding:0;">
        </a>
        
        <a href="https://www.instagram.com/semple_property_group/" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;margin:0;padding:0;padding-right:5px;">
            <img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61e0a63f40c878b6465_instagram.png" alt= "Instagram icon" height="35" style="height: 35px;display:block;margin:0;padding:0;">
        </a>
        
        <a href="https://goo.gl/maps/jWt8je8pFnN8Vi2m8" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;margin:0;padding:0;padding-right:5px;">
            <img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/616fd61d32add34ce0116798_location.png" alt= "Location icon" height="35" style="height: 35px;display:block;margin:0;padding:0;">
        </a>
    </td>
    <td   valign="top"  style="background-color:#3C3C3B; padding: 5px 20px 5px 12px; text-align:right;margin:0; ">

        <a href="https://www.ratemyagent.com.au/real-estate-agency/semple-property-group-ao219/sales/reviews" style="text-decoration: none; color: #393934; padding-right:5px; display: inline-block;margin:0;padding:0;padding-right:5px;">
            <img src="https://uploads-ssl.webflow.com/5e708a896f96221b4a9d76bc/61554ae7255348ced3b9293a_rate.png" alt= "Rate my agent icon" height="35" style="height: 35px;display:block;margin:0;padding:0;">
        </a>
        
    </td>

</tr></table>

另外注意导入签名到Outlook的时候，不要直接从浏览器复制粘贴，建议通过Outlook的签名编辑界面直接插入HTML文件内容，避免复制过程中自动增加额外格式。

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