如何解决基本网格中的基础电子邮件扩展按钮
编辑:以下概述的示例也适用于雷鸟。
我目前正在学习如何使用电子邮件基础创建电子邮件。我当前要做的是在网格内创建一个“扩展按钮”。通过引用为网格here概述的示例和为扩展按钮here概述的示例,我提出了以下HTML。
以下是我的想法,根据到目前为止的读物,我的想法是我必须在网格的列中添加“展开的按钮”,因此我具有以下HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
</head>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="columns first last">
<table>
<tr>
<table class="row">
<tbody>
<tr>
<column>
<table class="button expanded">
<tr>
<td>
<table>
<tr>
<td>
<center data-parsed><a href="#"
align="center"
class="float-center">Reset Password</a>
</center>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
<table class="button small-expanded">
<tr>
<td>
<table>
<tr>
<td><a href="#">Expand small only</a></td>
</tr>
</table>
</td>
</tr>
</table>
</column>
</tr>
</tbody>
</table>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>
看起来完全像我预期的那样,但是在Outlook中看起来不正确。例如,这是在Firefox中的外观:
这是我发送电子邮件时Outlook中的外观:
对于上下文,我正在尝试创建典型的“重置密码”电子邮件模板。请注意,按照文档说明,我已经通过位于here的CSS内联代码运行HTML。
解决方法
此问题在2.3.1版中已解决,但是未更新其官方下载链接以提供最新版本的代码,因此我花了一些时间尝试解决已解决的问题。现在,当按钮被展开时,Outlook中的锚点链接就会出现问题。
有关更多信息,请参见https://github.com/foundation/foundation-emails/issues/415。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。