邮件中嵌入html中要注意的样式
来源:互联网 发布:抽奖软件代码 编辑:程序博客网 时间:2024/05/17 21:42
工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则:
1.邮件使用table+css布局
2.邮件主要部分在body内部,所以样式一定要写成内嵌的,不能在head标签中写style,也不能外联。
如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<
table
border="0" cellspacing="0" cellpadding="0" style="font-family:'微软雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
<
tbody
>
<
tr
>
<
td
style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
<
table
width="100%" border="0" cellpadding="5" cellspacing="0" >
<
tbody
>
<
tr
>
<
td
>
<
p
style="margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px"><
br
> 尊敬的开发者:<
br
> </
p
>
<
p
style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;"><
br
> “xxx”在此次的‘网络友好度测试’评级:<
span
style="color:#F44336;">4颗星</
span
>(最高5颗星)。<
br
> </
p
>
</
td
>
</
tr
>
</
tbody
>
</
table
>
</
td
>
</
tr
>
</
tbody
>
</
table
>
3.不能用浮动的方式定位。position:absolute;float:left;等都不行,float在qq邮箱客户端中可以识别,但是在outlook中无法识别。
4.表格的border,使用table上的border属性,可以在qq浏览器中兼容,但是在outlook中打开是没有边框的,这种情况,我么只能给每一个td加一个border,在table中使用border-collapse:collapse;来合并重复的边框。
如:
1
<
table
width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">
这样设置border会在outlook中显示不出border;
5.为了保证兼容性,需要把邮件的宽度设置为600px,最大600px;
6.少用img,因为很多邮箱客户端默认不显示图片,所以,如果需要图片的话,一定要写好alt和title;
7.背景图片,尽量用background-color使用纯色背景,如果一定要用背景图片,使用background属性,
1
<
div
background=”http://image1.koubei.com/images/common/logo_koubei.gif”></
div
>
8.邮件不支持javascript,flash以及一些特殊的标签。
由于邮件客户端对css支持各有不同,所以一定要多测试再发送,保证样式的正确。如果出现了不兼容的情况,一定要耐心的使用最简单的方式进行兼容,尽量少用特殊标签及比较复杂的属性。
阅读全文
1 0
- 邮件中嵌入html中要注意的样式
- HTML中嵌入CSS样式
- Html lessonTwo(html中嵌入层叠样式表css)
- Eclipse的WEB项目>HTML/JSP中嵌入CSS样式表(相对路径)
- Flex中嵌入HTML
- SWT 中嵌入Html
- html中嵌入flash
- html中嵌入flash
- 在HTML中嵌入Javasript的方法
- HTML页面中嵌入CSS的方式
- html中嵌入flv格式文件的代码
- 在HTML中嵌入Javasript的方法
- html中,可嵌入的视频代码
- html中嵌入flv格式文件的代码
- html中嵌入内容的元素总结
- django中嵌入html的语法
- html 中cursor的样式
- CSS样式中内联、嵌入、外部样式
- QNX常用调试命令-QNX常用命令
- linux查找目录下的所有文件中是否含有某个字符串
- opencv关于矩阵的操作
- 解决中文输入 Qt 针对5.8也做了说明 及4.x版本
- numpy模块的linspace函数实例
- 邮件中嵌入html中要注意的样式
- jquery中的html()方法和append()使用注意点
- CSS之水平垂直居中
- A+B长字符串
- [HNOI2008]越狱 快速幂取模
- word 插入对象Microsoft公式3.0失败
- 梯度下降法基本原理
- Git学习
- spring+webscoket注解方式