2011-05-02 4 views
25

대부분의 전자 메일 클라이언트에서 작동하는 html 뉴스 레터가 있지만 Outlook에서는 형식이 엉망입니다.Outlook 용 html 전자 메일 서식 지정

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
    body { 
    background-color: #98AFC7; 
    } 
</style> 
<title></title> 
</head> 
<body> 
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;"> 
    <tr> 
     <td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td> 
    </tr> 
    <tr> 
     <td> 
      <table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;"> 
       <tr> 
        <td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;"> 
        <h3>Top Stories</h3> 
         <ul> 
          <li>Topic 1</li> 
          <li>Topic 2</li> 
          <li>Topic 3</li> 
         </ul> 
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
        </td> 
        <td valign="baseline" style="padding: 10px; border: 1px solid;"> 
         <h3>Latest News</h3> 
         <p> 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
         </p> 
        </td> 
       </tr> 
      </table>     
     </td> 
    </tr> 
    <tr> 
     <td cellpadding="10px" style="border: 1px solid; cellspacing: 0; width: 100%; height: auto; text-align: center;"> 
      <strong>Copyright &copy 2011 Frost Miller Group </strong> 
     </td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto"> 
      <center> 
      <a href="#">Contact Us</a> 
      &nbsp; 
      <a href="#">Terms of Use</a> 
      &nbsp; 
      <a href="#">Trademarks</a> 
      &nbsp; 
      <a href="#">Privacy Statement</a> 
      &nbsp; 
      <a href="#">Site Feedback</a> 
      </center> 
     </td> 
    </tr> 
    </table> 
</body> 
</html> 

Outlook에서 올바르게 표시하려면 무엇을 변경해야합니까?

답변

36

당신의이 구체적으로 "엉망"어떤 특정 부분을 설명 할 필요가 당신에게 특정 도움을 줄 수있을, 혹은 스크린 샷을 제공합니다. 또한 어떤 버전의 Outlook에서 문제가 발생하는지 파악하는 데 도움이됩니다.

어느 쪽이든 CampaignMonitor.com's CSS guide은 종종 이메일 클라이언트 불일치를 디버깅하는 데 도움이되었습니다. 보다 정교한 선택기을의

  • 다양한 형태의 : 당신이 몇 가지 그냥 잘 또는 모든 Outlook에서 작동하지 않습니다 볼 수있는 가이드에서

    , 여기에 더 중요한 것들 중 몇 가지 하이라이트입니다 , 예. E:first-child, E:hover, E > F (자식 조합자), E + F (인접 형제 조합자), E ~ F (일반 형제 조합자). 이것은 불행히도 인라인 스타일과 같은 대안에 의지하고 있음을 의미합니다.

  • 일부 글꼴 속성. white-space이 작동하지 않습니다.
  • background-image 속성은 작동하지 않습니다.
  • 박스 모델 속성에 몇 가지 문제가 있습니다. 가장 중요한 것은 height, widthmax- 버전이 사용 가능하지 않거나 특정 요소에 버그가 있음을 나타냅니다.
  • 위치 및 표시 문제 (예 : display, floatposition 모두 빠짐).

요약하면 : 은 CSS와 Outlook을 결합하면이 될 수 있습니다. 많은 추악한 해결 방법을 사용할 준비를하십시오.

추신. 귀하의 특정 경우, 당신의 이상한 행동을 일으킬 수있는 귀하의 HTML에 두 가지 사소한 문제가 있습니다. vertical-align을 사용하려고했던 "align=top"이 있습니다. 또한 에 대한 cell-padding은 존재하지 않습니다.

+0

몇 년 후, 마이크로 소프트 아웃룩 2013은 여전히, 나는 가끔도 여기에 착륙, 너무 매 6 개월에서 18 개월 내 자신의 대답을 다시 방문 아웃룩 2007 :( – Zarepheth

+1

@Zarepheth 찬성으로 렌더링 엔진 같은 HTML을 가지고 검색 할 때 – Jeroen

+9

유용한 추가 정보 하나를 찾았습니다. 실제로 HTML 전자 메일을 Outlook에서 렌더링하는 방법을 테스트하기 위해 Word에서 HTML 파일을 열 수 있으며 MS Office 응용 프로그램은 모두 동일한 렌더링 엔진을 사용합니다. – Paul

11

Outlook에서 css 및 html과 관련하여 MSDN을 반드시 확인해야합니다. 링크는 http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx입니다. Office 2007 이상을 보유하고 있지 않은 경우 2007 년판과 이전 버전의 주요 차이점이 있으므로 업그레이드해야합니다. 또한 결과 이메일을 파일로 저장하고 파이어 폭스로 검사하면 Outlook에서 변경되는 내용을 볼 수 있으며 더 구체적인 질문을 할 수 있습니다. Word를 사용하여 전자 메일을 일종의 미리보기로 볼 수도 있지만 적용 할 스타일에 대한 정보는 얻을 수 없습니다.

+2

HTML로 저장 한 다음 검사합니다. 브라우저에서 좋은 추천 (그리고 그냥 나를 크게 도와 줬어) - 고마워요 – hobailey

관련 문제