Email 时事通讯未正确呈现

Question

我是 CSS 和 HTML 的新手。 我有一个带有 HTML 和 CSS 代码的 email 模板。 我在我的通讯模板右上角放了一个粉红色的圆圈框： http://www.pedersenshotell.se/newsletter/

It looks OK on Firefox, Opera etc., but when I upload it to the Newsletter email campaign and send to Yahoo, Gmail, Outlook and Hotmail it looks so ugly. 它显示一个方形框而不是圆形。 为什么？

Answer 1

HTML 电子邮件是困难的事情。 email 客户端通常不是普通的浏览器，它们无法正确呈现 HTML，您会惊讶为什么正常的东西（如背景）无法正常工作。

出于安全原因等原因，web 服务正在删除/阻止部分。

我会坚持使用 HTML 3.2 或更简单的 HTML 解决方案，我知道这很烦人，我建议您使用Fractal ，它是 email 验证器服务来检查您的工作。

您还可以从Email 标准项目中获得提示，以查看支持哪些功能，哪些不支持。

啊，我差点忘了最重要的部分。 Please provide a web link on the top of the mail to provide a web based view of the newsletter, as usually "View this message as a Web page" or "Click here if the email is broken".

Answer 2

我怀疑该页面有一个方形框而不是圆形框，因为您在不支持 border-radius属性的浏览器中查看它。

请参阅 border-radius ，了解哪些浏览器和版本支持此属性。

不存在对边界半径的电子邮件客户端支持。

这里的一个解决方案是使用<img>而不是 CSS 生成的形状，尽管您可能还会发现电子邮件客户端会阻止外部内容 - 这是一项安全功能，可能会导致页面因图像损坏而看起来更糟。 由于页面上已经有其他图像，这对您来说可能不是问题。

Answer 3

email 活动工具（如（outlook、gmail、hotmail）中的时事通讯对 CSS 的支持较少。 此外，web 浏览器支持border-radius ，而不是 email 客户端。

最好将<img>用于背景图像、纯图像、渐变、圆角和 3d 相关的东西，而不是使用 CSS 样式。

请参阅此参考： http://www.campaignmonitor.com/css/

此参考显示不同 email 客户端支持哪个 CSS 属性。

Answer 4

让您意识到浏览器和 email 客户端有两种完全不同的方式来处理 HTML 和 CSS 是非常重要的。

您永远无法在时事通讯中使用 CSS 和 HTML 使其在所有客户端中 100% 兼容。 根据我的经验，使时事通讯 100% 兼容的唯一方法是在 HTML 标记中写入 CSS 内联，如下所示：

<td style="height:50px; width:100px; color: red; font-size: 12px; font-family: verdana;"> Content goes here </td>

Answer 5

如前所述，HTML email 客户端有一些问题需要考虑。 最重要的问题：内联您的 CSS styles（大部分时间）。

为了帮助构建 HTML 电子邮件，有一些不错的样板模板。 查看http://www.emailology.org/#1或https://github.com/seanpowell/Email-Boilerplate并使用这些模板作为起点。