2016-09-20 5 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을있다

(나는/크로스 클라이언트 디스플레이를 돕기 위해 몇 가지 다른 속성을 편집 추가).