- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
因为我正在处理 HTML 电子邮件模板,在所有浏览器中看起来都很棒,但在 Outlook 中呈现有问题。它无法正确呈现,尤其是 button
和 border-bottom
元素。附上 Outlook 截图。
<table cellspacing="0" cellpadding="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;border-spacing: 0px;">
<tbody>
<tr style="border-collapse: collapse;">
<td width="520" align="left" style="padding: 0;margin: 0;">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;border-spacing: 0px;">
<tbody>
<tr style="border-collapse: collapse;">
<td align="center" style="padding: 0;margin: 0;padding-bottom: 15px;">
<table width="520" height="101" cellspacing="1" cellpadding="1" border="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;border-spacing: 0px;">
<tbody>
<tr style="border-collapse: collapse;border-bottom: 1px solid #BDBDBD;height: 1px;width: 100%;margin: 0px;">
<td style="padding: 0;margin: 0;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 700;line-height: 38px;"><strong>Booking Reference:</strong></td>
<td style="padding: 0;margin: 0;text-align: right;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;line-height: 38px;">1087882</td>
</tr>
<tr style="border-collapse: collapse;border-bottom: 1px solid #BDBDBD;height: 1px;width: 100%;margin: 0px;">
<td style="padding: 0;margin: 0;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 700;line-height: 38px;"><strong>Accommodation:</strong></td>
<td style="padding: 0;margin: 0;text-align: right;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;line-height: 38px;"><a href="" target="_blank" style="-webkit-text-size-adjust: none;-ms-text-size-adjust: none;mso-line-height-rule: exactly;font-family: 'Open Sans', sans-serif;font-size: 18px;text-decoration: underline;font-style: normal;color: #233745;line-height: 38px;">Lodge Suites</a> (August 18 - 2 Nights)</td>
</tr>
<tr style="border-collapse: collapse;border-bottom: 1px solid #BDBDBD;background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;height: 1px;width: 100%;margin: 0px;">
<td style="padding: 0;margin: 0;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 700;line-height: 38px;"><strong></strong></td>
<td style="padding: 0;margin: 0;text-align: right;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;line-height: 38px;">Guided Fishing Trip (August 19)</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<tr style="border-collapse: collapse;">
<td style="padding: 0;margin: 0;padding-top: 15px;padding-bottom: 15px;padding-left: 40px;padding-right: 40px;"> <span style="display: block;height: 48px;width: 270px;border-radius: 10px;background-color: #16A5B4;box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.5);text-align: center;"> <a href="https://viewstripo.email/" target="_blank" style="-webkit-text-size-adjust: none;font-family: 'Open Sans', sans-serif;font-size: 16px;text-decoration: none !important; font-style: normal;color: #fff;font-weight: 700;letter-spacing: 1px;line-height: 47px;text-align: center;display: block;text-transform: uppercase;">Pay Remaining Balance</a></span></td>
</tr>
最佳答案
按钮处理起来很繁琐。下面是两个链接代码,它们模拟一个按钮并以相同的方式在所有电子邮件客户端 中工作。您将必须删除 td 上的填充,并且可以更改按钮的填充以控制高度和宽度。
实心按钮:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="https://www.stackoverflow.com" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
</tr>
</table>
带边框的按钮:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #ffffff; border-radius: 0px; text-align: center;" valign="top" bgcolor="#ffffff" align="center"> <a href="" target="_blank" style="display: inline-block; color: #3498db; background-color: #ffffff; border: solid 2px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
</tr>
</table>
我注意到您使用 Open Sans 作为按钮的字体。 Outlook 不会读取此内容并呈现 Times New Roman。希望您已经为它编写了回电。
关于html 电子邮件模板不在 Outlook 中呈现属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57153778/
以下 Outlook 的命令适用于 Outlook 2010: outlook.exe /c ipm.note /m "&subject=abc" /a "c:\attach.txt" 但它不适用于
我有 2 个电子邮件帐户,一个是 Gmail,另一个是 Outlook。我想在邮件到达时自动将进入 Outlook 的邮件接收到 Gmail。我该怎么做?Outlook 是否存在任何可能阻碍此操作的安
Outlook 加载项如何在邮件上设置 MAPI 属性(例如正文内容),但仅将其保存在本地缓存中(而不发送回 Exchange 服务器)?我见过使用一些加密插件来完成此操作。 我愿意使用几乎任何可以实
有什么方法可以在 Outlook 的模板主题或正文中插入今天的日期吗?这样,每当我打开保存的模板时,今天的日期就会自动显示在主题和正文中。 有什么内置功能吗?像 Date() 这样的东西? 最佳答案
我有一个时事通讯系统,可以跟踪阅读它的人。尽管此功能仅在允许下载图像的情况下才有效。但这不是我现在的问题。 我的问题是,当我在 Outlook (2010) 中打开新闻稿并授予下载图像的权限时,我的系
我需要从 Outlook msg 文件中读取内容。目前我正在使用来自 CodeProject.com 的类(class)项目来实现这一点,因为在服务器上部署 VSTO 和 Outlook 不是一种选择
我正在开发可与共享邮箱一起使用的 Outlook 加载项。目前,office 插件在委托(delegate)场景中不可用,但 MS 已经发布了支持这些场景的预览版本。https://learn.mic
我正在开发可与共享邮箱一起使用的 Outlook 加载项。目前,office 插件在委托(delegate)场景中不可用,但 MS 已经发布了支持这些场景的预览版本。https://learn.mic
我开发了一个运行良好的 Outlook Web 插件。它是一个任务 Pane ,可在约会的组合模式下使用,它收集事件数据、添加一些数据并将其发送到某个地方的 API。 我现在想做的是将经过身份验证的用
在 Outlook for Mac 中,office.js Outlook 加载项在我假设是 Safari Web 控件的任务 Pane 中运行。我无法确定您如何从任务 Pane 中运行的加载项中清除
Marshal.GetActiveObject("Outlook.Application") 在 Outlook 启动并继续运行时抛出 操作不可用(HRESULT 异常:0x800401E3 (MK_
我有一个 VSTO Outlook 2007 加载项。我必须检查 Outlook 是否与交换服务器脱机/联机。我正在使用如下代码: NameSpace ns = Application.GetNam
我正在尝试在图像上方添加文本,如下所示。它适用于除 Outlook 2010、Outlook 2007、Outlook 2013 之外的所有电子邮件客户端。所有这三个客户端都忽略了填充。我到处都试过了
有没有办法处理 Outlook 邮件项中收件人的悬停事件?我想在悬停时显示一个弹出窗口,其中包含有关收件人的一些信息,并想知道是否可以通过 Outlook 加载项实现。 最佳答案 因为 Inspect
我正在尝试在 Outlook 2007 中创建、更新和删除事件(但最好它适用于所有版本)。创建和删除事件工作正常。我关注了 several threads但由于某种原因更新操作失败。 当我双击 ICS
我在 ms Outlook 中有 2 个帐户('user1@test.com' - 默认配置文件,'user2@test.com'),我正在尝试使用非默认帐户通过 python 发送消息。这是我的代码
我有一个我最近继承的Outlook 2007加载项,目前在生产中存在一个问题,有些用户正在周期性地,似乎是随机地禁用其加载项。外接程序中没有日志,并且在外接程序代码中的每个方法/事件调用周围都存在tr
是否可以为 创建 HTML 电子邮件签名? 2003年展望或以上不引用外部图像? 也就是说,使用那些特殊的“cid”引用,但将图像本身嵌入到签名中,而不是嵌入到文件系统或网络中。 这适用于根据用户的各
似乎没有太多信息或任何好的代码示例用于以编程方式设置 Outlook 2007 MailItem 的类别。 MSDN has a limited page ,并提到使用 VB 的 拆分 功能,或多或少
Outlook 2007 在 Outlook 中撰写新邮件时,可以创建指向其他邮件的链接吗? Whww 我正在撰写一封新邮件,我想创建一个指向已发送项目的链接,单击此链接应该会打开邮件。 这能做到吗?
我是一名优秀的程序员,十分优秀!