关键词:
目前要做一个定时发送邮件的功能,邮件的大致内容布局如下:
HTML中
在QQ邮件中,可以进行正常显示。
在outlook网页版,也可以正常显示,
outlook客户端
但是到了客户端就会出现很多很神奇的问题,基本样式全丢,浮动不支持,定位不支持,所以很多样式都乱了,后来百度一下才知道OUTLOOK是按照word的方式解析的,很多样式,标签都不支持,不支持内部样式表,所以只能写内联,等等兼容问题,这里记录一下:
首先outlook支持传统的table 布局,不支持浮动,定位布局。所以写的时候就要注意这一点。
1.内部样式表,外联样式表,JS不支持
这里写样式的话,只能写内联
2.table样式初始化,将内部边距合并
和普通浏览器一样都是为table 本身添加cellpadding="0" cellspacing="0"属性
3.border问题
给每一个td添加边框
<td style="border: 1px solid #919191!important;"></td>
再通过border-collapse:collapse对边框进行合并
<table cellpadding="0" cellspacing="0" style=" border-collapse:collapse;">
4.margin,padding问题
在outlook的客户端,table上下的margin 会失效,这里参考网上使用hspace
和vspace,但是并没有效果,所以我采用了比较low的方式,填补了空元素来完成间隔
关于padding会自动添加,这里我为每一个td进行了样式清空 padding为0的方法来解决
5.line-height问题
mso-line-height-rule:exactly是微软的CSS属性,对其他无效,作用于块级元素
<td style="mso-line-height-rule:exactly; line-height:33px;">
6.浮动问题
左右浮动可以使用align="left"/"right"来实现
首先为大盒子定一个width,然后设置align="center",里面的img 注意不要设置align="right" 就可以实现图片在width中 右浮动
7.colspan,rowspan实现问题
这个我测试了依稀,在outlook客户端是可以被识别的,所以可以继续使用该属性
8.图片问题 注意使用线上绝对路径的src值,防止图片找不到
9.对于字体居中问题
要使每一个td里面的数据都居中对齐,需要结合使用
<td align="center" style="text-align:center;">0</td>
有的不继承table中的字体居中属性,所以只能一个个设置
10.背景色问题
我曾经在网页中使用灰色作为背景,table为白色,来突出,到了客户端则全屏变为灰色,这里只要将bgcolor="#fff" 改成白色就可以了
这里放一个相关outlook内置html的较为详细的介绍链接,方便以后查看
11.这里补充一个点 十六进制颜色 的 缩写有的outlook也是不支持的 bgcolor="#f60" 这个颜色无法识别 只能写全 #ff6600 才可以识别
2018.0515
发现了一种新模式:
用提供的表格模版.excel 另存为.html 在用编译器打开,作为模版文件 进行嵌套
部分内容展示:
<meta name=ProgId content=Excel.Sheet> <meta name=Generator content="Microsoft Excel 14"> <style> <!--table {mso-displayed-decimal-separator:"\."; mso-displayed-thousand-separator:"\,";} @page {margin:.75in .7in .75in .7in; mso-header-margin:.3in; mso-footer-margin:.3in;} .style0 {mso-number-format:General; vertical-align:bottom; white-space:nowrap; mso-rotate:0; mso-background-source:auto; mso-pattern:auto; color:black; font-size:11.0pt; font-weight:400; font-style:normal; text-decoration:none; font-family:����, sans-serif; mso-font-charset:134; border:none; mso-protection:locked visible; mso-style-name:��ͨ; mso-style-id:0;} rt {color:windowtext; font-size:9.0pt; font-weight:400; font-style:normal; text-decoration:none; font-family:����, monospace; mso-font-charset:134; mso-char-type:none; display:none;} --> </style> html标签: <col width=82 style='mso-width-source:userset;mso-width-alt:2998;width:82pt'>
是excel本身的样式,单位,标签形式
兼容性:网页端和部分客户端outlook支持
最后得到了最简单的模版:
1.公用内部样式表:
<style>td{border-bottom:1px solid #d9d9d9;border-left:1px solid #d9d9d9;text-align:center;font-size:14px}</style>
2.table的内联样式(宽度根据需要定义)
<table width="880" border="0" cellspacing="0" cellpadding="0">
3.td内联样式(不需要每一个进行padding margin的清空 )
<td width="110" rowspan="2" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">品牌事业部</td> width 内容确定 所以给了定值 rowspan colspan 跨行 跨列 bgcolor 是背景色 之后的内联样式 是根据特殊情况 字体加粗,大小等样式的控制
效果图:
代码展示:
<table width="880" border="0" cellspacing="0" cellpadding="0"><tr><td style="text-align:right;border:none;vertical-align:middle;padding:14px 0 8px"><img src="http://static.yuntongauto.com/yth/images/cw-logo.png" /></td></tr></table> <table width="880" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="8" style="text-align:center;border:none;font-size:40px;border-bottom:1px solid #f2f2f2;color:#9e1423;padding-bottom:20px">用品系统周报表</td> </tr> <tr> <td height="50" colspan="4" style="font-weight:bold;text-align:left;border:none;font-size:15px"> 开始日期:2018/3/26 结束日期:2018/4/1</td> <td colspan="4" style="font-weight:bold;text-align:right;border:none;font-size:15px">单位 :元 </td> </tr> <tr> <td height="50" colspan="8" bgcolor="#157dd1" style="font-weight:bold;color:#fff;font-size:20px;border:none">全国汇总(已切换系统)</td> </tr> <tr> <td width="110" rowspan="2" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">品牌事业部</td> <td width="110" height="32" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">订单金额</td> <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">销售金额</td> <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">成本</td> <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">毛利</td> <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">毛利率</td> <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">单车收入</td> <td width="110" bgcolor="#f0f0f0" style="font-weight:bold;border-right:1px solid #d9d9d9;font-size:15px">单车毛利</td> </tr> <tr> <td height="32" bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td> <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td> <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td> <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td> <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td> <td bgcolor="#f0f0f0" style="font-weight:bold;font-size:15px">本周</td> <td bgcolor="#f0f0f0" style="font-weight:bold;border-right:1px solid #d9d9d9;font-size:15px"><span style="font-weight:bold;font-size:15px">本周</span></td> </tr> <tr> <td height="32" style="font-weight:bold">汇总</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="border-right:1px solid #d9d9d9"> </td> </tr> <tr> <td height="32" style="font-weight:bold">事业一部</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="border-right:1px solid #d9d9d9"> </td> </tr> <tr> <td height="32" style="font-weight:bold">事业二部</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="border-right:1px solid #d9d9d9"> </td> </tr> <tr> <td height="32" style="font-weight:bold">事业三部</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="border-right:1px solid #d9d9d9"> </td> </tr> <tr> <td height="32" style="font-weight:bold">事业四部</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="border-right:1px solid #d9d9d9"> </td> </tr> </table>
如何在 Outlook 2010 html 电子邮件中显示背景颜色?
】如何在Outlook2010html电子邮件中显示背景颜色?【英文标题】:howtodisplaybackgroundcolorinoutlook2010htmlemail?【发布时间】:2012-11-0420:11:05【问题描述】:我的问题与MicrosoftOutlook2010有关。实际上我想在Outlook2010中发布我的HTML时事通讯... 查看详情
样式化 php 电子邮件以允许 Microsoft Outlook 阅读样式
】样式化php电子邮件以允许MicrosoftOutlook阅读样式【英文标题】:StylingphpemailtoallowMicrosoftOutlooktoreadstyle【发布时间】:2018-11-1403:34:21【问题描述】:我遇到了MicrosoftOffice无法读取我创建的任何内联样式或类的问题。起初,我只是... 查看详情
div样式在outlook电子邮件中不起作用(代码片段)
...HTML模板。它在Gmail,雅虎上运行良好。但Div风格不适用于Outlook。以下是我使用过的代码。<divstyle="margin:auto;padding:auto;background-color:#FFFFFF;width:600px;border:0px;">TestingEmail</div>我设置div宽度600px也使边距和填充自动。这样它就... 查看详情
Outlook 2007 将 HTML 电子邮件中的链接样式更改为在发送到 Hotmail、Gmail 等时具有蓝色下划线。任何修复?
】Outlook2007将HTML电子邮件中的链接样式更改为在发送到Hotmail、Gmail等时具有蓝色下划线。任何修复?【英文标题】:Outlook2007changeslinkstylesinaHTMLemailtohaveablueunderlinewhensenttoHotmail,Gmail,etc.Anyfixes?【发布时间】:2011-05-0723:35:08【问题... 查看详情
在 Outlook 中浮动替换电子邮件
】在Outlook中浮动替换电子邮件【英文标题】:Floatreplacementforemailinoutlook【发布时间】:2013-08-2901:59:38【问题描述】:这是thisquestion的后续问题。我正在写这封两栏的电子邮件,有人建议我在我的td上使用float:left,以便宽度适合... 查看详情
outlook邮件不能显示
我的OUTLOOK受到了几封邮件,只要在收件箱里点到这几封邮件,OUTLOOK就OVER了!只能强行关闭,昨天把收件箱的邮件都转移到相关下层文件夹中或删除,只剩下那几封“不能动”的邮件!现在我OUTLOOK一打开,就处于OVER状态,只能... 查看详情
使用 VBA 在 Outlook 中过滤具有某些类别的邮件时遇到问题
】使用VBA在Outlook中过滤具有某些类别的邮件时遇到问题【英文标题】:HavingTroublefilteringmailsinOutlookwithcertainCategorieswithVBA【发布时间】:2022-01-1006:52:52【问题描述】:我在收件箱中有数百封邮件,它们可以有多个类别(“AA”、... 查看详情
从 Outlook 邮件中提取压缩文件
】从Outlook邮件中提取压缩文件【英文标题】:ExtractZippedfilefromOutlookmail【发布时间】:2017-07-1714:18:52【问题描述】:我正在尝试从我的Outlook邮件中提取一个zip文件。以下是我的脚本,但它抛出了一个错误对象变量或未设置块变... 查看详情
在 Outlook 2007 中获取当前用户的电子邮件地址
】在Outlook2007中获取当前用户的电子邮件地址【英文标题】:GettheemailaddressofthecurrentuserinOutlook2007【发布时间】:2011-06-1306:56:05【问题描述】:我有一个用C#编写的Outlook插件。我想知道如何或是否可以获取当前用户的电子邮件地... 查看详情
如何在 Outlook 中读取 Internet 标题和电子邮件
】如何在Outlook中读取Internet标题和电子邮件【英文标题】:HowtoreadInternetheaderofandemailinoutlook【发布时间】:2017-03-1119:20:26【问题描述】:我尝试阅读电子邮件Internet标头,我们可以在Outlook应用程序的电子邮件属性中查看它我问是... 查看详情
Outlook 使用规则未在系统托盘中显示新邮件警报
】Outlook使用规则未在系统托盘中显示新邮件警报【英文标题】:Outlookusingrulesnotshowingnewmessagealertinsystemtray【发布时间】:2013-08-1109:09:20【问题描述】:我为MicrosoftOutlook2010创建了一些规则,即特定邮件转到特定文件夹。这很... 查看详情
Outlook 软件去除电子邮件中的内联 CSS
】Outlook软件去除电子邮件中的内联CSS【英文标题】:OutlooksoftwarestripsouttheinlineCSSinemails【发布时间】:2016-03-0112:07:26【问题描述】:我有一封类似如下的电子邮件。问题是,它在Gmail上运行良好,但在Outlook上,所有CSS内联语句都... 查看详情
Outlook 2013 仅 HTML 电子邮件中的图像间隙
】Outlook2013仅HTML电子邮件中的图像间隙【英文标题】:Outlook2013onlyimagegapinHTMLemail【发布时间】:2013-02-2221:55:21【问题描述】:我的HTML电子邮件仅在Outlook2013中出现问题,在以前的版本(包括2007和2010)中看起来不错。我添加了sty... 查看详情
获取从 Outlook 表中获取的消息的 Outlook 邮件项
】获取从Outlook表中获取的消息的Outlook邮件项【英文标题】:getoutlookmailitemformessagetakenfromoutlooktable【发布时间】:2012-06-0614:35:54【问题描述】:对于从Outlook表中获取的消息,如何获取对MailItem的引用?如果我生成一个表,其中包... 查看详情
获取 Outlook 日历邮件
】获取Outlook日历邮件【英文标题】:FetchOutlookCalendarMails【发布时间】:2014-06-0111:49:23【问题描述】:在我的收件箱中有一些日历邮件(来自日历的会议请求)。当应用程序从收件箱中获取日历邮件时,它会抛出以下错误:无法... 查看详情
java示例代码_解决这个问题";邮件正文未使用java"在outlook中显示;
java示例代码_解决这个问题";邮件正文未使用java"在outlook中显示; 查看详情
从 Outlook 检索电子邮件的脚本
】从Outlook检索电子邮件的脚本【英文标题】:ScriptforretrievingemailsfromOutlook【发布时间】:2015-09-0709:22:40【问题描述】:这是我从Outlook收件箱中检索电子邮件并存储其附件的脚本。问题是无法正常工作。它能够从未读的电子邮件... 查看详情
如何使用 SMTP 发送邮件并在 Outlook 发件箱中查看邮件?
】如何使用SMTP发送邮件并在Outlook发件箱中查看邮件?【英文标题】:HowcanIsendmailwithSMTPandseethemailintheOutlookoutbox?【发布时间】:2011-03-1216:41:26【问题描述】:我们有一个新的Exchange服务器并使用SMTP通过它发送邮件。到目前为止,... 查看详情