1. ホーム
  2. 質問と答え
  3. OutlookのHTML電子メールボタンの整列

OutlookのHTML電子メールボタンの整列

2017-12-19 11 views
1

クライアント用にビルドしているHTML電子メールのアクションボタンの呼び出しを調整する際に問題があります。ボタンは左に表示され、正しく入力されません。OutlookのHTML電子メールボタンの整列

これは、彼らが私のブラウザとほとんどの電子メールクライアントに表示される方法です：

Correct buttons

そして、これは、彼らがOutlook 2016で表示する方法である：ここでは

Outlook output

は私の真っ黒なマークアップです：

<row class="call-to-actions"> 
    <columns small="6"> 
     <spacer size="50"></spacer> 
     <button class="facebook float-right" href="#">Like on Facebook</button> 
     <spacer size="50"></spacer> 
    </columns> 
    <columns small="6"> 
     <spacer size="50"></spacer> 
     <button class="twitter" href="#">Follow on Twitter</button> 
     <spacer size="50"></spacer> 
    </columns> 
</row>

My SAS for the buttons：

table { 
    &.button { 
    table { 
     td { 
     background: transparent !important; 
     } 
    } 
    &.facebook { 
     table { 
     background-color: #3b5998; 
     td { 
      a { 
      background-color: #3b5998; 
      border: none; 
      line-height: 30px; 
      } 
     } 
     } 
    } 

    &.twitter { 
     table { 
     background-color: #1da1f2; 
     td { 
      background-color: #1da1f2; 
      a { 
      background-color: #1da1f2; 
      border: none; 
      line-height: 30px; 
      } 
     } 
     } 
    } 
    } 
}

電子メールフレンドリーなHTMLにマークアップするために、Foundation for Emailを使用しています。これが生成された出力の仕組みです。

<table class="row call-to-actions" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> 

    <tbody> 
    <tr style="padding:0;text-align:left;vertical-align:top"> 
     <th class="small-6 large-6 columns first" 
     style="Margin:0 auto;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:16px;padding-right:10px!important;text-align:left;width:274px"> 

     <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
      <tbody> 
      <tr style="padding:0;text-align:left;vertical-align:top"> 
       <th style="Margin:0;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left"> 

       <table class="spacer" 
       style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" 
         height="50px"></td> 
        </tr> 
        </tbody> 
       </table> 
       <table class="button facebook float-right" 
       style="Margin:0;border-collapse:collapse;border-spacing:0;float:right;margin:0;padding:0;text-align:left;vertical-align:top;width:auto"> 

        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> 

         <table style="background-color:#3b5998;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 

          <tbody> 
          <tr style="padding:0;text-align:left;vertical-align:top"> 
           <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;border:none;border-collapse:collapse!important;color:#fff;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> 

           <a href="#" 
           style="Margin:0;background-color:#3b5998;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none"> 
           Like on Facebook</a> 
           </td> 
          </tr> 
          </tbody> 
         </table> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
       <table class="spacer" 
       style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" 
         height="50px"></td> 
        </tr> 
        </tbody> 
       </table> 
       </th> 
      </tr> 
      </tbody> 
     </table> 
     </th> 
     <th class="small-6 large-6 columns last" 
     style="Margin:0 auto;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:10px!important;padding-right:16px;text-align:left;width:274px"> 

     <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
      <tbody> 
      <tr style="padding:0;text-align:left;vertical-align:top"> 
       <th style="Margin:0;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left"> 

       <table class="spacer" 
       style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td> 
        </tr> 
        </tbody> 
       </table> 
       <table class="button twitter" 
       style="Margin:0;border-collapse:collapse;border-spacing:0;margin:0;padding:0;text-align:left;vertical-align:top;width:auto"> 

        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> 

         <table style="background-color:#1da1f2;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 

          <tbody> 
          <tr style="padding:0;text-align:left;vertical-align:top"> 
           <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;background-color:#1da1f2;border:none;border-collapse:collapse!important;color:#fff;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> 

           <a href="#" 
           style="Margin:0;background-color:#1da1f2;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none"> 
           Follow on Twitter</a> 
           </td> 
          </tr> 
          </tbody> 
         </table> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
       <table class="spacer" 
       style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td> 
        </tr> 
        </tbody> 
       </table> 
       </th> 
      </tr> 
      </tbody> 
     </table> 
     </th> 
    </tr> 
    </tbody> 
</table>

何が欠けていますか？

出典

2017-12-19 Burgi

+0

詳しい例を送ったので私はあなたの質問にupvoteを書いたので、あなたのコードを見て、いくつかの問題を特定し、提案と修正を提供することができました。 – gwally

答えて

0

Outlookのような電子メールクライアントでは、一部のスタイルはサポートされていません。 thisのようなツールでコードをスキャンすることをお勧めします。 このようなツールがたくさんあります。

出典

2017-12-19 17:54:33 tpliakas

2

paddingサポートはOutlook 2007-2016でバグです。ノーツではまったく動作しません。

line-heightまた、Outlookとバグがあります。

ボタンのためのあなたの高さを得るように、私は「フェイスブック上のように」、あなたのhrefの親に<td height="30">を設定してみてください可能性があります。

さらに、font-family:&#39;Circular Book&#39;はOutlookで動作しません。 Webフォントのサポートもバグです。一部のフォントは機能しますが、Webセーフではない2つの名前を持つフォントは、OutlookをWebセーフフォント（Times New Roman）に戻します。

幸運。

出典

2017-12-19 18:46:19 gwally

+0

ヒントをありがとう、私は今日後でそれらをテストします。 – Burgi

0

これはOutlookの非常に一般的な問題です。私はBulletproof Buttons by Campaign Monitorをお勧めします。それは非常に素晴らしいクロスプラットフォームであり、素晴らしい素晴らしい作品です。

出典

2017-12-20 17:18:18 scoopzilla

関連する問題

 関連する問題