HTML電子郵件上的填充問題
[英]Padding issue on HTML email
問題描述
我有一個問題，在移動設備上的表格或圖像周圍出現多余的填充與HTML電子郵件簽名，我無法找到解決方案。
我必須嘗試我研究的每一個解決方案，包括：
- 添加顯示：阻止圖像
- 添加行高：1px到td
- 添加font-size：0; 到了td
- 確保每個部分都有填充：0; 和保證金：0;
- 將cellpadding =“0”和cellspacing =“0”添加到所有表，tr和td元素
- 向表和td添加寬度和高度（沒有任何效果）
- 添加float：left和align =“left”
- 添加表格布局：固定;
- 添加邊框：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> <a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p>
</td>
</tr>
</table>
</body>
</html>
2 個解決方案
解決方案1
2 2017-07-06 08:45:32
<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> <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預覽中看起來沒問題，如果它沒有幫助你可以發布你的問題的截圖嗎？
解決方案2
0 2017-07-11 23:38:16
像電子郵件一樣編碼！ 嘗試混合方法！ 此方法允許您滿足Outlook電子郵件客戶端和div的使用意味着您不必擔心額外的差距。
<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> <a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p> </td> </tr> </table>
如果此方法適合您，請告訴我。
鏈接填充 HTML 電子郵件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.