电子邮件HTML模板 - 获取<a></a>标签根据父​​

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

我一直在四处寻找发现在完成我想要做的方式，但没有运气。我正在寻找一个防弹的跨邮件客户端解决方案。

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

Answer 1

石蕊内的概念链接你引用应该工作。 Outlook 确实支持支持display: block;和width，虽然在线标签支持box模型（例如<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> 

---

为了得到展望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％的宽度，但是您可能会接近而不会让其他客户中的东西太多。

Answer 2

从包含它的<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>