html - 电子邮件 HTML 模板 - 让 标签根据父级 获取完整的可点击宽度

Question

电子邮件 HTML 模板 - 让标签占据整个可点击宽度

我找不到渲染全宽度的好方法 <a>邮件模板中的标记。问题是 <a>标签不缩放到集合 width .

链接只能在文本上点击，不会扩展到容器的整个宽度。即使设置固定宽度也不行。

有人有经验或好的防弹片段来完成此任务吗？

到目前为止的方法

display或 width呈现电子邮件模板时不考虑属性。

我已经尝试(通过一些不同的调整)以下一段 HTML 代码。一切都没有运气。例如，Outlook 似乎不接受 width和 display考虑到。宽度一直被设置，看起来与 width:auto 的行为相同。 .

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="border-spacing: 0; border-collapse: collapse; padding: 0; vertical-align: top; width: 100%;">
   <tbody>
      <tr style="padding: 0; vertical-align: top;">
         <td align="center" valign="top" class=" padding-left-0  padding-right-0  padding-top-10  padding-bottom-0 " style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; Margin: 0; text-align: left; font-size: 14px; line-height: 1.3; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px;">
            <table border="0" cellpadding="0" cellspacing="0" width="620" align="left" style="border-spacing: 0; border-collapse: collapse; padding: 0; vertical-align: top; width: 620px !important;">
               <tbody>
                  <tr align="center" width="620" style="padding: 0; vertical-align: top; width: 620px !important;">
                     <td valign="top" class=" padding-left-20  padding-right-20  padding-top-10  padding-bottom-10 " align="center" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; Margin: 0; font-size: 14px; line-height: 1.3; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; border-radius: 0px; text-align: center; background: #ffc20f; color: #ffffff !important;">
                        <a bgcolor="#ffffff" href="ipsum" target="_blank" style="font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; Margin: 0; line-height: 1.3; mso-style-priority: 99; color: #ffffff; text-decoration: none; border-radius: 0px; cursor: pointer; background: #ffc20f; margin: 0; border: 1px solid #ffc20f; width: 620px; text-align: center !important;display:inline-block;width:100%;"> 
                        <span style="color: #ffffff">IPSUM</span>
                        </a>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

Codepen

我一直在四处寻找方法来完成我想做的事情，但没有运气。我正在寻找防弹跨邮件客户端解决方案。

Litmus 对此有一个主题，但这并不能解决问题。 https://litmus.com/community/discussions/117-making-bulletproof-buttons-100-clickable

Answer 1

您引用的 Litmus 链接中的概念应该有效。 Outlook 确实支持display: block;和 width ，尽管内联标签(例如 <a href> 不是很好)支持盒子模型。

---

这是一个全 Angular 可点击按钮的基本示例:

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
    <tr>
        <td width="100%" style="background: #ffc20f; text-align: center;">
            <a href="http://www.google.com" style="background: #ffc20f; border: 10px solid #ffc20f; text-align: center; text-decoration: none; display: block;">
                <span style="color:#ffffff;">IPSUM</span>
            </a>
        </td>
    </tr>
</table>

---

要使 Outlook 2013 显示效果更好，您可以 conditionally添加一堆  到 <a href>加宽按钮宽度:

<a href="http://www.google.com" style="background: #ffc20f; border: 10px solid #ffc20f; text-align: center; text-decoration: none; display: block;">
    <span style="color:#ffffff;"><!--[if mso 15]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->IPSUM<!--[if mso 15]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--></span>
</a>

可能很难准确地获得 100% 的宽度，但您可能会很接近，而不会在其他客户端中搞砸太多。