Outlook에서 올바르게 렌더링 할 HTML 2007/2010

현재 아래 HTML을 사용하여 아래 이미지를 렌더링합니다. 그러나 배경 이미지가 지원되지 않으므로 Outlook에서는이 기능이 작동하지 않습니다. 나는 테이블을 사용하여 Outlook에서 요소를 올바르게 렌더링하도록 조언했지만이 문제를 어떻게 해결할 것인지 잘 모릅니다. 아웃룩 2007/2010 "아래 올바르게 이미지를 렌더링 할 HTML을 제공하는 사람에게 200 현상금은 이메일 전송 시스템에 대한Outlook에서 올바르게 렌더링 할 HTML 2007/2010

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     div, p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     div.box { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color:rgb(255,232,0); 
     } 
     div.box div.inner { 
      height:100%; 
      background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <div class="inner"> 
      <p class="name">John</p> 
      <p>XYZ Company</p> 
     </div> 
    </div> 
</body> 
</html>

enter image description here

출처

2012-04-14 RunLoop

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     table { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color: #fee800; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
<table> 
<tr><td>John Smith</td><td></td></tr> 
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr> 
</table> 

</body> 
</html>

출처

2012-04-14 20:21:56 chadpeppers

위의 예 에서처럼 HTML 전자 메일에서 테이블을 사용합니다. 다음은 HTML에서 허용되는 태그에 대한 링크입니다 email : http : //www.campaignmonitor.com/css/ – chadpeppers

테이블에 +1 (필자는 그렇게 말할 줄은 몰랐습니다). 슬프게도 이메일 클라이언트는 div를 좋아하지 않습니다. –

인라인 CSS를 사용하는 것이 좋습니다. webapp에는 그 자체가 있기 때문에 html 헤드의 내용은 대부분의 웹 메일 클라이언트에서 무시됩니다. 필자는 Mailchimp가 스타일 시트를 인라인으로 변환하는 온라인 파서를 제공한다고 생각합니다. 인라인 스타일로 더 긴 HTML을 작성하는 것은 매우 어색 할 것이기 때문입니다. – Halka

당신은 테이블을 사용할 수 있어야하며 사용하지 않는 CSS를 머리 또는 다른 CSS에 사용하십시오. CSS를 사용하고 인라인으로 시도해보십시오.

<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;"> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td> 
    </tr> 
</table>

출처

2012-04-17 07:48:16 Tarun

Outlook에서 올바르게 렌더링 할 HTML 2007/2010

답변

관련 문제