2016-09-20 8 views
0

に見通しで尊重ない:パディング私は、パディングとアンカーリンク持たボタン

<a href="http://my.cris.dev:3008/services/3/viewer" style="text-decoration:none; background-color:#137191; color:#fff; display:block; padding:16px 16px 16px; font:100 16px/16px &quot;Cabin&quot;,Arial, Helvetica, sans-serif; letter-spacing:0.025em; border-radius:4px;">Discover your 3D</a> 

をしかし、見通しは、このパディングを尊重していない、それだけではない台無しに他でデザインをする最善の解決策何、削除されますクライアント。

答えて

2

Outlookのボックスモデルのサポートは...スケッチです。このコードを試してください:

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td> 
      <table border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td bgcolor="#137191" style="padding: 16px; border-radius:4px"> 
         <a href="http://my.cris.dev:3008/services/3/viewer" target="_blank" style="font-size: 16px; mso-line-height-rule:exactly; line-height: 16px; font-family: 'Cabin',Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing:0.025em; color: #ffffff; text-decoration: none; display: inline-block;">Discover your 3D</a> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

これは、Outlookで崩壊するパディングの問題を解決します。 Outlookではborder-radiusの代わりに四角形の角が表示されますが、少なくともクリック可能なパッド付きのボタンが表示されます。

(私はクロスクライアント表示を助けるためにいくつかの他のプロパティを編集した/追加)

あなたが別の方法を好む場合a few way to achieve bulletproof buttons in emailがあります。

関連する問題