【发布时间】：2020-08-11 09:14:14
【问题描述】：
编辑：以下概述的示例也适用于雷鸟。
我目前正在学习如何使用电子邮件基础来创建电子邮件。我目前想要做的是在网格中创建一个“扩展按钮”。我通过引用为网格 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>
它看起来与我在 Firefox 中的预期完全一样，但在 Outlook 中看起来不正确。例如，它在 Firefox 中的显示如下：
这是我发送电子邮件时在 Outlook 中的样子：
就上下文而言，我正在尝试创建一个典型的“重置密码”电子邮件模板。请注意，我已按照文档的说明通过位于 here 的 CSS 内联程序运行 HTML。
【问题讨论】：
标签： html css zurb-foundation html-email