2017-01-19 10 views
0

내가 뉴스 레터 둥근 버튼을 만들 필요가 MS 메일에서 작동하지 않는, HTML 코드는 뉴스 레터둥근 버튼을

내용의 대부분은 확인하지만 노란색 버튼에 사용되는 웹 기반 도구에 삽입입니다 창에 둥근 모서리 (10) 메일 클라이언트

나는 내가 우리 할 수없는 경우 블록을 표시하고 성공하지

을 접두사 CSS 스타일을 사용하는 버튼과 같은 다른 태그를 사용하거나 변경하려고 반올림과 패딩을 잃을 일부 이미지를 사용합니다

,241,995,359,
+1

안타깝게도 대부분의 MS 이메일 클라이언트에서는'border-radius'가 지원되지 않으며'padding'도 제한적으로 지원됩니다. - https://www.campaignmonitor.com/css/ –

답변

1

아래이 (내가 MS Outlook에서 코드를 성공적으로이 유형을 테스트 한) 식으로 뭔가를 시도 할 수 있습니다, 트릭 인 VML은 arcsize

<div><!--[if mso]> 
 
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fillcolor="#ff0000"> 
 
    <w:anchorlock/> 
 
    <center> 
 
    <![endif]--> 
 
     <a href="http://" 
 
style="background-color:#ff0000;border-radius:20px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Click</a> 
 
    <!--[if mso]> 
 
    </center> 
 
    </v:roundrect> 
 
<![endif]--></div>

Source and Generator

+1

동의하는 것이 가장 좋은 방법입니다. 'border-radius'는 Win 10 Mail에서 지원되지 않으므로 VML이 가장 좋습니다. 특히'arcsize' 속성. –

+0

Windows 10 기본 전자 메일 클라이언트에서 나는 (이전과 같이) 배경색이 둥근 단추가없는 텍스트를 계속 볼 수 있습니다. 어쩌면 다른 렌더링 엔진을 사용합니다. – al404IT

0
속성

CSS가 메일 클라이언트에서 올바르게 나타나게하는 것은 약간의 고통입니다. 이러한 유형의 작업을 수행 할 때 서식 지정을 결정하기 전에이 호환성 차트를 사용했습니다.

[https://www.campaignmonitor.com/css/]

또 다른 좋은 도구는 클라이언트 사이에 서식하는 리트머스입니다 확인하는 리트머스입니다.

[내가 당신을 위해 더 나은 대답을했다 https://litmus.com/]

소원이 도움이되기를 바랍니다.