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

【问题标题】：HTML signature in gmail - weird spacegmail中的HTML签名-奇怪的空间
【发布时间】：2021-09-20 02:04:16
【问题描述】：

我正在尝试为电子邮件签名（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>

感谢您的所有帮助。

【问题讨论】：

标签： html gmail html-email newsletter

【解决方案1】：

这可能与您在 Gmail 中添加签名的方式有关。

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

【讨论】：

【解决方案2】：

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

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

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

这就是你将如何获得一致性，通过添加一个 HTML 电子邮件等效的 CSS 重置（注意它必须像你在这里所做的那样是内联的，而不是 <style>）。

【讨论】：