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

Question

我正在发送一封包含一些基本格式的电子邮件。它在 Gmail 中显示良好，在浏览器中显示良好。但是当我在 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

我已在对您的原始 post 的评论中请求更多代码，因为我们需要查看更多代码以查看分别影响标题、按钮和社交媒体图标的内容。

由于您现在已经提供了社交图标，所以目前还不清楚是什么导致了问题，因为您在两个电子邮件客户端中的使用方式都支持边距。不过，我会对您构建它的方式做一些小改动。

在 link 包裹的图像上设置边距并不理想。这有效地将 link 推出，这可能会导致用户 mis-clicks 。不是很好！试试这个：

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

因此，将 table 包裹在另一个 table 中，并将内边距和背景色应用到该包裹，然后在内部 table 上设置一个宽度，table然后单元格将自己平均分配包装的宽度 table，从而为您提供到处都能保持的间距。

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

Outlook Emails I send look different in the app versus the browser. Mainly formatting and background color

html

email

outlook

gmail

html-email