Outlook의 HTML 전자 메일 단추 맞춤

Question

클라이언트 용으로 작성중인 HTML 전자 메일에서 클릭 유도 문안 단추를 맞추는 데 문제가 있습니다. 버튼이 왼쪽에서 벗어나 제대로 표시되지 않습니다.

그리고 그들은 아웃룩 2016에 표시되는 방법이있다 :

여기

내 더러워진 마크 업입니다

이

은 브라우저에 표시되는 대부분의 이메일 클라이언트 어떻게 :

<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> 

버튼 용 내 SASS :

전자 메일 용 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> 

무엇이 누락 되었습니까?

Answer 1

일부 스타일은 Outlook과 같은 이메일 클라이언트에서 지원되지 않습니다. this 같은 도구를 사용하여 코드를 검사하는 것이 좋습니다. 이렇게 많은 도구를 찾을 수 있습니다.

Answer 2

padding 지원은 Outlook 2007-2016에서 버그가 있습니다. Notes에서 전혀 작동하지 않습니다.

• https://www.campaignmonitor.com/css/box-model/padding/

line-height는 또한 Outlook과 버그가.

• https://www.campaignmonitor.com/css/text-fonts/line-height/

는 "페이스 북에서 좋아요"버튼에 대한 귀하의 높이를 얻을 수 있도록 내가 당신의 HREF의 부모에게 <td height="30"> 설정을 시도 할 수도 있습니다.

또한 font-family:'Circular Book'은 Outlook에서 작동하지 않습니다. 웹 글꼴 지원도 버그가 있습니다. 일부 글꼴은 작동하지만 웹 안전하지 않은 두 개의 이름을 가진 글꼴은 Outlook이 웹 안전 글꼴 인 Times New Roman으로 되돌아갑니다.

행운을 빈다.

Answer 3

Outlook에서 자주 발생하는 문제입니다. 나는 Bulletproof Buttons by Campaign Monitor을 추천한다. 그것은 매우 좋은 크로스 플랫폼이며, 굉장히 멋지게 작동합니다.