css在邮件页面(模板)中的应用及注意点

作为前端开发工程师经常会碰到邮件页面(模板)的制作,但是要你制作出来的邮件页面支持众多邮件系统展现是非常困难的,一个很简单的页面在众多邮件系统展现可能有

很多的差别,甚至严重变形。在这里我仅仅分享一下自己的经验:(转载请注明出处:WEB前端开发 https://www.html.cn/)

1.关于HTML标签:

很多邮件系统会过滤<html>、<head>、<meta>、<title>、<body>、<style>、<link>,包括html的dtd信息,等;
2.关于CSS的支持可以参考各个邮件系统中的支持情况的统计列表(转载请注明出处:WEB前端开发 https://www.html.cn/)

1.excel格式:https://www.html.cn/book/CSSEmail/CSSEmail.xls

2.PDF格式:https://www.html.cn/book/CSSEmail/CSSEmail.pdf

以上资料来自:http://www.campaignmonitor.com/css/

?

//以下是文中的部分翻译,水平太差,请见谅:

桌面客户端
这是我们为了2008 CSS 指南 而测试过的Email客户端清单。
今年我们没有看到任何方面的巨大改进(没有大量的更新正在进行)。
但在2008年,Entourage肯定抢到了一些地盘。
希望这是一个来自于Redmond的标志。

网络客户端
以下是8个我们今年测试的基于网络的Email客户端。
我们增加了AOL网络。Mac和新的gmail。
我们曾经对gmail能够改善它的低标准支持寄予厚望,但非常不幸的是
它仅仅带给我们一个简洁的用户界面而已。
更新后的Live Hotmail接口带来了一些CSS的改进,包括支持标签
<head>和<body>中的元素<style>和<link>。

?

建议:(转载请注明出处:WEB前端开发 https://www.html.cn/)

1.使用table布局
由于css在众多邮件系统中支持差异性,建议table布局,可以省去很多布局样式;
2.不要在<body>中写样式;因为这个标签在很多邮件系统中是被过滤,甚至被替换成各个邮件系统中默认的标签和样式;
3.建议把css以style属性插入到每个有样式的标签中,当然这里要充分考虑样式的继承,以免都写重复的样式代码。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » css在邮件页面(模板)中的应用及注意点

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    1.邮件格式,一般分为上中下;最上面为“If you are having trouble viewing this email, please click here ”;中间邮件主体;最下面是声明、订阅之类的
    2.邮件一般用表格制作,css写在其中,最好要定义的内容放在“”中,样式只是个例子,字体大小,颜色根据自己需要写
    3.邮件不支持background_repeat功能,一般在中background=“”,然后定义width=”100%” height=”100%”
    4.邮件中连接部分在”<a>”中加入“target=email”
    5.邮件中图最好加上title=””,alt=””,那样即使图不能显示,客户也能看到文字,不影响邮件信息传递
    6.如果把一个图片切成两块;必须在添加让图片以块状显示;不然在hotmail的火狐浏览器下,图片下方有空隙

    268810年前 (2009-05-22)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏