gmail 中的 HTML 签名 - 奇怪的空间

如何解决gmail 中的 HTML 签名 - 奇怪的空间

我正在尝试为电子邮件签名（Lotus Notes）。然而，虽然它在 Lotus 上看起来不错（是的），但我在 Gmail 上的标题和电子邮件地址之间有这个空格。

我不知道为什么会这样。

它在 Lotus Notes 上的外观图片：

以及它在 gmail 上的显示方式：

此处指向 fiddle 的链接无法像在电子邮件中那样正常工作（不知道为什么）：

    <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=" display:table;font-family: Arial; font-size: medium; "><font size="3" face="Arial">John Doe Smith</font></span></strong>         
    
                <table align="left" width="100%" cellpadding="2",cellspacing="0">
    
    
                    <tr >   
                        <td><a  href="https:/URL-example.eu"><span style="display:table; font-size:small;  margin-top:0px;  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=" display:table; 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  align="left" width="100" cellpadding="2",cellspacing="" >
                    <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 中添加签名的方式有关。

最简单的方法是在网页中打开您的 HTML + CSS（您甚至可以使用您共享的 Stack Snippet 全屏显示），然后按 ctrl/cmd + A 选择页面上应该突出显示的所有内容蓝色，包括图像。然后按 ctrl/cmd + C 将其复制到剪贴板，然后将其粘贴到 Gmail 的签名字段中。如果您执行上述操作，您的代码就可以正常工作。

我无法在 Gmail 测试中复制这一点。应该没问题 - 但请查看@JHeth 的回答。

尽管如此，我在 Outlook iOS 上也发现了一些细微差别，因为它向 <font> 和 <a> 标签添加了 line-height:150%。经常有这样的默认值，所以最好总是为 <font> 和 <p> 和 <a> 标签指定字体大小和行高，而且还会有颜色和文本装饰<a> 的默认值。

对于块元素，有默认的边距和填充。

这就是通过添加 HTML 电子邮件等效的 CSS 重置来获得一致性的方法（注意它必须像您在此处所做的那样内联，而不是 <style>）。