时事通讯 css 在邮件中发送时表现怪异

newsletter css acts weird when sent in mail

我应该为客户制作一份时事通讯(我的第一份时事通讯)。在 html 中,它是完美的,当我在网络浏览器中打开它时,它也是它应该的样子。我首先遇到 CSS 根本没有显示的问题(我的 html 代码的头部有 css),然后我发现 'Inliner Tool'邮件黑猩猩。在我这样做之后,我的 css 终于和我的邮件一起发送了,但并不是所有的东西都在正确的位置,我现在真的不知道该怎么做。

我的图片作为背景图片放置在 div 中。每个 Div 都有一个以 px 为单位的大小,只有背景图像的大小以百分比为单位。

由于我是新来的,所以我真的不知道如何将我的代码放入我的问题中,所以我只想问问大家:有没有人遇到过同样的问题,你们是如何解决的?我希望我提供了足够的信息

更新: 感谢您告诉我有关 JSFiddle 的信息。我不能把 link 放在这里(抱歉),对这个 lol 还是很陌生。但是你可以去 jsfiddle 。 net 并添加 pht3rnet 来查看我的代码。 (在结果中,这正是它应该的样子。)

如果您想支持大多数电子邮件客户端,您必须了解您可以使用的 CSS 样式存在限制。您可以查看此 table,它会显示特定电子邮件客户端是否支持 CSS 属性:https://www.campaignmonitor.com/css/

例如 属性 background-image 不受 Outlook 2007+ 支持,因此如果从 Outlook 打开,您的图像将不会显示。

乔伊斯,不幸的是他们没有完美的方法。每个邮件客户端,每个操作系统,每个设备上。他们都有机会以不同的方式呈现您的内容。

您只需要约束自己坚持基本原则,不要沉迷于时事通讯,同时坚持与前 90% 的电子邮件受众保持联系。

Formatting HTML Email For clients

您会发现对您的电子邮件进行响应测试的网站,您会发现对您的电子邮件进行移动屏幕截图的网站。对我来说,它们都是一文不值的。响应不是移动电子邮件(移动电子邮件,实际上缩小您的内容视图端口以适合屏幕)。屏幕截图不是流畅的文本,您无法单击并测试功能。这是最重要的部分吧?

在您的设备上将时事通讯发送给自己并查看。好吗?在您的 Web 客户端上查看它。包括 link 到整页 HTML 新闻通讯的浏览器版本,以便那些无法正确看到它的人有机会在浏览器中看到它。

INBOX TESTING - 确保您的客户有最好的机会看到您的时事通讯,您可能需要多个版本才能绕过某些垃圾邮件过滤引擎。