工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则:

1.邮件使用table+css布局

2.邮件主要部分在body内部,所以样式一定要写成内嵌的,不能在head标签中写style,也不能外联。

如:

  1. <table border="0" cellspacing="0" cellpadding="0" style="font-family:'微软雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
  2. <tbody>
  3. <tr>
  4. <td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
  5. <table width="100%" border="0" cellpadding="5" cellspacing="0" >
  6. <tbody>
  7. <tr>
  8. <td>
  9. <p style="margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px">
                              尊敬的开发者:
                            </p>
  10. <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;">
                             “xxx”在此次的‘网络友好度测试’评级:<span style="color:#F44336;">4颗星</span>(最高5颗星)。
                            </p>
  11. </td>
  12. </tr>
  13. </tbody>
  14. </table>
  15. </td>
  16. </tr>
  17.  
  18. </tbody>
  19. </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支持各有不同,所以一定要多测试再发送,保证样式的正确。如果出现了不兼容的情况,一定要耐心的使用最简单的方式进行兼容,尽量少用特殊标签及比较复杂的属性。

邮件中嵌入html中要注意的样式的更多相关文章

  1. WPF中嵌入WinForm中的webbrowser控件

    原文:WPF中嵌入WinForm中的webbrowser控件 使用VS2008创建WPF应用程序,需使用webbrowser.从工具箱中添加WPF组件中的webbrowser发现其中有很多属性事件不能 ...

  2. 在自定义的web监听器中嵌入web中的定时事件

    在 http://www.cnblogs.com/myadmin/p/4806265.html 中说明了自定义web监听器的一些东西. 本文中的web定时任务也基于上篇文章的自定义web监听器. 新建 ...

  3. Qt界面中嵌入其他exe程序的界面,使用Qt5

    下面用一个小例子来演示如何在Qt的界面中嵌入其他exe程序的界面,最终效果如下图所示.本文参考了 http://blog.csdn.net/jiaoyaziyang/article/details/4 ...

  4. linux内核分析作业4:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    系统调用:库函数封装了系统调用,通过库函数和系统调用打交道 用户态:低级别执行状态,代码的掌控范围会受到限制. 内核态:高执行级别,代码可移植性特权指令,访问任意物理地址 为什么划分级别:如果全部特权 ...

  5. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  6. 利用webview实现在andorid中嵌入swf

    项目背景是这样的,一套系统有三个客户端分别是网页,flex和android,现在已经在flex上面做好了一个在线客户视频聊天系统,然后在这个基础上修改打包成了SWF,放在网页上面使用效果不错,但是利用 ...

  7. 在应用中嵌入Python:转

    在应用中嵌入Python 前面的章节讨论如何扩展Python,如何生成适合的C库等.不过还有另一种情况:通过将Python嵌入C/C++应用以扩展程序的功能.Python嵌入实现了一些使用Python ...

  8. C++中嵌入Lua脚本环境搭建

    第一步(环境准备工作): 工具: ●LuaForWindows_v5.1.4-46.exe傻瓜式安装. 作用:此工具可以在windows环境下编译运行Lua脚本程序.安装完成后会有两个图标:Lua和S ...

  9. WPF中嵌入普通Win32程序的方法

    公司现在在研发基于.Net中WPF技术的产品,由于要兼容旧有产品,比如一些旧有的Win32程序.第三方的Win32程序等等,还要实现自动登录这些外部Win32程序,因此必须能够将这些程序整合到我们的系 ...

随机推荐

  1. DBImport V3.7版本发布及软件稳定性(自动退出问题)解决过程分享

    DBImport V3.7介绍: 1:先上图,再介绍亮点功能: 主要的升级功能为: 1:增加(Truncate Table)清表再插入功能: 清掉再插,可以保证两个库的数据一致,自己很喜欢这个功能. ...

  2. PC分配盘符的时候发现==》RPC盘符不可用

    服务器汇总:http://www.cnblogs.com/dunitian/p/4822808.html#iis 服务器异常: http://www.cnblogs.com/dunitian/p/45 ...

  3. PHP以接口方式实现多重继承(完全模拟)--学习笔记

     1.UML类图: 2.PHP代码: <?php /** * Created by PhpStorm. * User: andy * Date: 16-11-23 * Time: 下午7:57 ...

  4. 通过 floating IP 访问 VIP - 每天5分钟玩转 OpenStack(126)

    前面我们是直接用 curl 测试 VIP,在更为真实的场景中通常会使用 floating IP 访问 VIP. 下面我们给 VIP 关联一个 floating IP,再进行测试. 访问 Project ...

  5. 简约之美Jodd-http--深入源码理解http协议

    Jodd 是一个开源的 Java 工具集, 包含一些实用的工具类和小型框架.简单,却很强大! jodd-http是一个轻巧的HTTP客户端.现在我们以一个简单的示例从源码层看看是如何实现的? Http ...

  6. SDWebImage源码解读之SDWebImageCache(下)

    第六篇 前言 我们在SDWebImageCache(上)中了解了这个缓存类大概的功能是什么?那么接下来就要看看这些功能是如何实现的? 再次强调,不管是图片的缓存还是其他各种不同形式的缓存,在原理上都极 ...

  7. 谈一谈NOSQL的应用,Redis/Mongo

    1.心路历程 上年11月份来公司了,和另外一个同事一起,做了公司一个移动项目的微信公众号,然后为了推广微信公众号,策划那边需要我们做一些活动,包括抽奖,投票.最开始是没有用过redis的,公司因为考虑 ...

  8. php批量删除

    php批量删除可以实现多条或者全部数据一起删除 新建php文件 显示数据库中内容: <table width="100%" border="1" cell ...

  9. VICA 架构设计(1)

    本文记录最近完成的一个通用实时通信客户端的架构.   背景 我们公司是做税务相关的软件,有针对大客户 MIS 系统,也有针对中小客户的 SaaS 平台.这些系统虽然都是 B/S 的,但是也需要使用 A ...

  10. 免费道路 bzoj 3624

    免费道路(1s 128MB)roads [输入样例] 5 7 21 3 04 5 13 2 05 3 14 3 01 2 14 2 1 [输出样例] 3 2 04 3 05 3 11 2 1 题解: ...