如何在网络电子邮件客户端中显示 HTML 电子邮件?
您好,我正在构建一个基于网络的小型电子邮件客户端。我在显示 HTML 邮件时遇到问题。显示 HTML 邮件的最佳实践是什么?我
- 发现了一些东西Css Reset Strip body tag
- 在邮件中
Hi I am building a small web based email client. I am facing problems in displaying HTML mails. What are the best practices involved in displaying an HTML mail? Some things I found
- Css Reset
- Strip body tag in the mail
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
首先,重要的是不要允许所有 CSS 和 HTML 标签。我会查找该文件并允许定义一组 HTML 标签和 CSS 属性。
例如,如果您重置 CSS,您仍然可以发送
、
First of all, it's important to not allow all the CSS and HTML tags. I would look for the file and allow a defined set of HTML tags and CSS attributes.
For example, if you reset the CSS, you can still send stuff like
<iframe>
,<form>
and all other possible malicious tags.So I would start of thinking what kind of HTML tags would you like to support, and strip all other ones out of it. And then the same for the CSS.
This is by no means easy. I mean you also would have to take in account things like people trying to break your interpreter...
You could look into this Sitepoint Blogpost, it describes how people should code HTML-emails. So it might be a good idea to start there and see what's usually supported.
一句话答案是“1. 使用基于表格的布局,2. 仅内联 CSS,以及 3. 在每个可能的电子邮件客户端中测试”。
客户端测试可能是最重要的,因为每个电子邮件客户端(以及客户端+浏览器组合)可能有其自己的怪癖,并且许多怪癖只是一路上学到的;例如使用 HTML 属性 width &高度,因为 Outlook 并不总是遵循宽度和高度的内联样式。高度,或者 Gmail 倾向于在图像周围添加边距,除非您为 HTML 元素明确设置 margin:0 等。
当在一个客户端中修复 HTML 电子邮件的外观最终会在另一个客户端中破坏它时,不要保留添加越来越多的样式:尝试简化 HTML/CSS,即使这意味着编写更多标记。例如,如果填充和边距看起来不正确,则可以通过向表格添加更多行或列并固定其高度/宽度来实现相同的外观。更多标签比担心所有电子邮件客户端将如何呈现 CSS 框模型更简单。
有很多关于 HTML-for-email 的文章和博客文章,例如 http:// /articles.sitepoint.com/article/code-html-email-newsletters 很有帮助——尽管很多内容对于新版本的客户端来说已经过时了。
The one sentence answer would be "1. Use table-based layouts, 2. only inline CSS, and 3. test in every email client possible."
The client testing is probably the most important because every email client (and client + browser combination) may have its own quirks and many are just learned along the way; such as using HTML attributes width & height because Outlook won't always follow the inline styles for width & height, or that Gmail tends to add margins around images unless you explicitly set margin:0 for the HTML elements, etc. etc.
When fixing the look of an HTML email in one client ends up breaking it in another client, don't keep adding more and more styling: try to simplify the HTML/CSS, even if it means writing more markup. For example, if padding and margins don't look right, the same look could be achieved by adding more rows or columns to the table and fixing their heights/widths. More tags is simpler than worrying about how all the email clients will render the CSS box model.
There's a lot of articles and blog posts on HTML-for-email such as http://articles.sitepoint.com/article/code-html-email-newsletters that are helpful -- though a lot are out of date with newer versions of clients.