Lotus Notes HTML邮件签名在Gmail中出现姓名与邮箱间异常空白问题

问题原因 #

• 姓名所在行的</strong>标签后存在大量冗余换行和空格，Gmail渲染时会将这类块级元素周边的连续空白转换为可视间距，Lotus Notes对该类冗余空白的容错处理更强，因此不会出现额外空白。
• 姓名外层span设置了display: table属性，同时后续两个子table都加了align="left"属性，Gmail会给左对齐的table默认添加额外的下外边距，Lotus Notes不会识别该默认样式。
• 嵌套table布局缺少清除浮动的处理，Gmail渲染时会自动撑开姓名块和后续table之间的垂直间距。
• 原代码存在语法错误，cellpadding="2",后多余的逗号会导致部分客户端解析样式异常。

修复方案 #

替换为如下调整后的代码即可，已适配两端客户端：

<table border="0" cellpadding="6" cellspacing="0">
    <tr align="left">
        <td valign="top" width="100"><a href="https:/URL.eu"><img src="https://i.imgur.com/XCyNdd6.png" alt="logo"></a></td>
        <td valign="top" width="700">
            <strong><span style="font-family: Arial; font-size: medium; display: block; margin-bottom: 2px;"><font size="3" face="Arial">John Doe Smith</font></span></strong>
            <table width="100%" cellpadding="2" cellspacing="0" style="margin:0 0 4px 0;">
                <tr>   
                    <td><a href="https:/URL-example.eu"><span style="font-size:small; text-decoration:none; font-family: Arial; color:#16161D;"><font size="2" face="Arial" color="#16161D">https:/URL-example.eu</font></span></a></td>  
                </tr>
                <tr>
                    <td><a href="mailto:email@URL-example.eu"><span style="font-size: small; text-decoration:none; font-family: Arial;"><font size="2" face="Arial" color="#16161D">email@URL-example.eu</font></span></a></td>
                </tr>
            </table>
            <table width="100" cellpadding="2" cellspacing="0">
                <tr align="left"> 
                    <td width="30"><a href="https://www.facebook.com/ExampleName"><img src="https://i.imgur.com/f6DwyDA.png" alt="Example Name Facebook Account"></a></td>
                    <td width="35"><a href="https://www.instagram.com/ExampleName/"><img src="https://i.imgur.com/BDQERsI.png" alt="Example Name Instagram Account"></a></td>
                    <td width="50"><a href="https://twitter.com/ExampleName"><img src="https://i.imgur.com/Xx1atey.png" alt="Example Name Twitter Account"></a></td>     
                </tr>
            </table>
        </td>
    </tr>               
</table>

调整说明 #

• 删除了所有冗余的换行和空格，避免Gmail将空白转换为可视间距
• 移除了不必要的display: table属性和子table的align="left"属性，避免默认外边距产生
• 手动指定了块级元素的固定间距，保证两端渲染效果一致
• 修复了语法错误，移除了属性后多余的逗号

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