我发送的 Outlook 电子邮件在应用程序和浏览器中看起来不同主要是格式和背景色

如何解决我发送的 Outlook 电子邮件在应用程序和浏览器中看起来不同主要是格式和背景色

我正在发送一封带有一些基本格式的电子邮件。它在 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>

因此，将表格包装在另一个表格中，并将填充和背景颜色应用于该包装，然后在内部表格上设置一个宽度，然后表格单元格将自己均匀地划分包装表格的宽度，从而为您提供间距将无处不在。