Question

我遇到一个问题，即使用HTML电子邮件签名在移动设备上的表格或图片周围出现多余填充，我无法找到解决方案。

我必须尝试我研究过的每一个解决方案，包括：

添加显示：阻止图像
添加行高：1px到td
添加font-size：0;到了td
确保每个部分都有填充：0;和保证金：0;
添加cellpadding =＆＃34; 0＆＃34;和cellspacing =＆＃34; 0＆＃34;到所有表，tr和td元素
为表格和td添加宽度和高度（没有任何效果）
添加float：left和align =＆＃34; left＆＃34;
添加table-layout：fixed;
添加边框：0; border-spacing：0;边界崩溃;元素

这个问题似乎出现在我测试的三星和iPhone设备上。

任何新的建议都将不胜感激。

具有额外间距的图像在这里：

<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180"> 
    <tr style="padding: 0; margin: 0;">
        <td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important;"></td>
    </tr>
</table>

整个代码如何，因为我有两个并排的表可能是导致问题的原因：

<!DOCTYPE html>
<html>
<head>
<style>
a {
    color: #00001b;
    text-decoration: underline;
}
table {
    padding: 0;
    margin: 0;
    display: block;
}

</style>
</head>
<body>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>    
    <td>            
        <table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
            <tr style="padding: 0; margin: 0;">
                <td cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0;" border="0" height="10">
                    <table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180"> 
                        <tr style="padding: 0; margin: 0;">
                            <td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
                        </tr>
                    </table>
                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;">
                        <tr>
                            <td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
                                <strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
                                <span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />          
                            </td>
                        </tr>
                    </table>                    
                </td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td colspan="2">
    <p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
    <strong>T:</strong> <a href="tel:0000000">00000000</a> | 
    <strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p>
    <p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a>&nbsp;<a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p>
    </td>   
</tr>
</table>
</body>
</html>

Answer 1

<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
    <tr>    
        <td>            
            <table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="345" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td valign="top">
                        <table align="left" cellpadding="0" cellspacing="0" border="0" width="180"> 
                            <tr>
                                <td valign="bottom" cellpadding="0" cellspacing="0"><img src="logo.png" width="180" height="100" alt="" style="display: block"></td>
                            </tr>
                        </table>
                    </td>
                    <td valign="top">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="165">
                            <tr>
                                <td style="text-align: left;padding:0 0 0 25px;">
                                    <strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
                                    <span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />          
                                </td>
                            </tr>
                        </table>                    
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">
        <p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
        <strong>T:</strong> <a href="tel:0000000">00000000</a> | 
        <strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p>
        <p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a>&nbsp;<a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p>
        </td>   
    </tr>
</table>

您可能希望在两个表之间添加</td><td>。我还将25px填充移动到副本的左侧，而不是图像。（我在这里假设了img尺寸）。这在我的EoA预览中看起来没问题，如果它没有帮助你发布你的问题的截图吗？

Answer 2

将其编码为电子邮件！尝试混合方法！此方法允许您迎合Outlook电子邮件客户端，使用div意味着您不必担心额外的差距。

＆＃13;

<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>    
    <td>            
        <table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
            <tr style="padding: 0; margin: 0;">
                               
                   <td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px; width: 367px;">   
                    
<!--[if (gte mso 9)|(IE)]>
<table width="367" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="180">
<![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="100%"> 
                        <tr style="padding: 0; margin: 0;">
                            <td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
                        </tr>
                    </table>
</div>
								  
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="180">
<![endif]-->

<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;" width="100%">
                        <tr>
                            <td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
                                <strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
                                <span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />          
                            </td>
                        </tr>
                    </table>
</div>

 <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->
                    
                    
                    
                    
                                        
                </td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td colspan="2">
    <p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
    <strong>T:</strong> <a href="tel:0000000">00000000</a> | 
    <strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p>
    <p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a>&nbsp;<a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p>
    </td>   
</tr>

</table>

＆＃13;

如果此方法适合您，请告诉我。

HTML电子邮件中的填充问题

2 个答案: