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

Question

我正在发送一封电子邮件，其中包含一些基本格式。它在 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>

我主要关心的是为什么颜色不同。 任何关于为什么会改变的帮助将非常感激。谢谢大家

Answer 1

一般常见的电子邮件问题是浏览器和手机上的深色模式可能会表现得很奇怪并导致背景颜色问题。

Answer 2

我在您原始帖子的评论中请求了更多代码，因为我们需要查看更多代码来分别了解是什么影响了标题、按钮和社交媒体图标。

由于您现在已经提供了社交图标，因此仍然不清楚导致问题的原因，因为在两个电子邮件客户端中，您使用的方式都支持边距。 不过，我会对你构建它的方式做一个小小的改变。

在链接中的图像上设置边距并不理想。这有效地将链接推出，从而可能导致用户误点击。不是很好！ 试试这个：

<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>

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

Answer 3

我遇到了同样的问题，经过 1 周的调试和挖掘，我发现 chrome 和 Edge 正在根据所选的系统主题渲染邮件。因此，如果 Outlook.live.com 是深色模式，并且系统主题是浅色（Windows），则您的电子邮件正文将以浅色模式呈现，其他部分将为深色（outlook.live.com 主题）。因此，如果您想收到相同的邮件，系统主题和outlook.live.com主题应该都是深色或浅色。这太糟糕了。 Firefox 工作正常，并且 Firefox 取决于所选的 Outlook.live.com 主题。