メール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;とですが、インラインタグのボックスモデルのサポート（<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>にボタンの幅を広げる：

正確に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>