電子郵件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>