问题描述
我正在发送一封带有一些基本格式的电子邮件。它在 Gmail 和浏览器上的 Outlook 中显示良好。但是一旦我在 Gmail 应用程序或 Outlook 应用程序中打开它,它就会看起来很糟糕。
以下是在浏览器中为粉红色条生成的 HTML,例如外观正确的版本:
<td style="padding:20px" align="center" bgcolor="#facbe3">
<a href="" style="font-size:16px;text-decoration:none;color:#222d64" target="_blank">
<img src="" alt="Follow Us On Facebook" style="height:40px;width:40px;margin-left:10px"
class="CToWUd">
</a>
<a href="" style="font-size:16px;text-decoration:none;color:#222d64" target="_blank" >
<img src="" alt="Follow Us On Instagram" style="height:40px;width:40px;margin-left:10px"
class="CToWUd">
</a>
<a href="" style="font-size:16px;text-decoration:none;color:#222d64" target="_blank">
<img src="" alt="Follow Us On Pintrest" style="height:40px;width:40px;margin-left:10px"
class="CToWUd">
</a>
<a href="" style="font-size:16px;text-decoration:none;color:#222d64" target="_blank" >
<img src="" alt="Visit Us On Youtube" style="height:40px;width:40px;margin-left:10px"
class="CToWUd">
</a>
</td>
我主要关心的是为什么颜色不同。 任何有关为什么会改变的帮助将不胜感激。谢谢各位大佬
解决方法
我要求在您的原始帖子的评论中添加更多代码,因为我们需要查看更多代码以查看分别影响标题、按钮和社交媒体图标的内容。
由于您现在已经提供了社交图标,目前还不清楚是什么导致了问题,因为您在两个电子邮件客户端中的使用方式都支持保证金。 不过,我会对您构建它的方式做一个小改动。
在包含在链接中的图像上设置边距并不理想。这有效地推出了可能导致用户误点击的链接。不是很好! 试试这个:
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" role="presentation">
<tr>
<td align="center" bgcolor="#facbe3" style="padding:20px">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:205px;">
<tr>
<td align="center">
<a href="" style="font-size:16px;text-decoration:none;color:#222d64" target="_blank">
<img src="https://picsum.photos/40/40" alt="Follow Us On Facebook" style="height:40px;width:40px;" class="CToWUd">
</a>
</td>
<td align="center">
<a href="" style="font-size:16px;text-decoration:none;color:#222d64" target="_blank" >
<img src="https://picsum.photos/40/40" alt="Follow Us On Instagram" style="height:40px;width:40px;" class="CToWUd">
</a>
</td>
<td align="center">
<a href="" style="font-size:16px;text-decoration:none;color:#222d64" target="_blank">
<img src="https://picsum.photos/40/40" alt="Follow Us On Pintrest" style="height:40px;width:40px;" class="CToWUd">
</a>
</td>
<td align="center">
<a href="" style="font-size:16px;text-decoration:none;color:#222d64" target="_blank" >
<img src="https://picsum.photos/40/40" alt="Visit Us On Youtube" style="height:40px;width:40px;" class="CToWUd">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
因此,将表格包装在另一个表格中,并将填充和背景颜色应用于该包装,然后在内部表格上设置一个宽度,然后表格单元格将自己均匀地划分包装表格的宽度,从而为您提供间距将无处不在。