电子邮件 HTML 模板 - 根据父级 <td> 获取 <a></a> 标签以获取完整的可点击宽度

Question

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

我找不到在邮件模板中呈现全宽 <a> 标记的好方法。问题是 <a> 标签没有缩放到集合 width。

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

有人有经验或好的防弹片段来完成这个吗？

接近

在呈现电子邮件模板时不考虑 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

从包含它的 <td> 中删除填充，并将填充添加到 <a>。

这是一个codepen fork。

<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; 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%; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px;"> 
        <span style="color: #ffffff">IPSUM</span>
     </a>
</td>

Answer 2

您引用的 Litmus link 中的概念应该有效。 Outlook 确实支持 display: block; 和 width，但对内嵌标签的框模型支持（例如 <a href> 不是很好）。

这是全角可点击按钮的基本示例：

<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% 的宽度，但您可能会很接近，而不会在其他客户端中搞砸太多。

电子邮件 HTML 模板 - 根据父级 <td> 获取 <a></a> 标签以获取完整的可点击宽度

Email HTML template - getting the <a></a> tag to take full clickable width according parent <td>

html

css

email

html-email