HTML 电子邮件模板可点击区域答案

【问题标题】：HTML Email Template Clickable AreaHTML 电子邮件模板可点击区域
【发布时间】：2014-09-29 05:52:12
【问题描述】：

有点令人困惑的问题可能很明显可以解决..

我有一个用来发送活动电子邮件的 mailchimp 模板。模板生成器具有可以自定义的默认按钮。

除了锚点仅用于按钮内的文本。哪个将可点击区域限制为仅文本元素。无论如何应用一个简单的修复来应用以使外部类可点击？我尝试在外部 TD 周围包裹一个锚标记，但这并不能解决问题。

                <tbody>
                    <tr>

                            <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial; font-size: 16px; padding: 20px;">
                                <a class="mcnButton " title="    Confirm Email    " href="URL" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;">    Confirm Email    </a>
                       </td>

                    </tr>
                </tbody>

感谢您的帮助，

【问题讨论】：

使 a-tag 成为块元素应该可以解决问题（显示：块）
不幸的是没有这样的运气
为你的标签添加宽度和高度

标签： html email anchor mailchimp

【解决方案1】：

我是这样解决的：

<tr>
  <td align="center" valign="middle" class="mcnButtonContent" style="font-family:Arial;font-size:16px;padding: 0;">
    <a class="mcnButton " title="Reply" href="{{replyLink}}" target="_blank" style="font-weight:bold;letter-spacing:normal;line-height:100%;text-align:center;text-decoration:none;color:#ffffff;word-wrap:break-word;display: block;margin: 0;padding: 16px;">Reply</a>
  </td>
</tr>

关键是从td 元素中删除填充，并使a 增长以填充表格单元格。 a 上的 display:block 和 padding 的组合成功了。

【讨论】：

你拯救了我的一天。

【解决方案2】：

如果你想让整个表格单元格/行成为链接，最好使用 JavaScript 的 onclick 函数：

<a onclick="document.location ='http://www.google.com'"class="mcnButton " title=" Confirm Email " href="URL" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;"> Confirm Email </a>

【讨论】：