Outlook에서 전자 메일이 보이는 이유는 무엇입니까?

나는 이미지를 주로 기반으로 이메일을 작성 중입니다. 전자 메일은 브라우저에서 열면 좋지만 Outlook으로 열면 매우 나쁩니다. Outlook에서 일종의 렌더링 프로세스를 사용한다고 들었습니다. 그게 사실이야? 내 이메일이 분쇄되지 않도록 보호하려면 어떻게해야합니까?Outlook에서 전자 메일이 보이는 이유는 무엇입니까?

http://www.s4ea.org/invite.html 내 이메일을 수행하고 작동하지 않는 있었 :

내 이메일에서보세요 https://litmus.com/tests/16706239/versions/1/screenshots

내 코드 : 당신의 CSS의 일부가 지원되지 않을 수 있습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Invitation</title> 
<style> 

@charset "utf-8"; 
/* CSS Document */ 

.wrapper { 
    width:30%; 
    margin-left:auto; 
    margin-right:auto; 
} 

.slim { 
    background-color: #B63538; 
    margin:0 0 2px 0; 
} 

.logo { 
    margin:0 0 0 0; 
    padding:0 0 0 0; 
} 

.logo img { 
    width: 100%; 
    height:auto; 
} 

.text { 
    margin:2px 0 0 0; 
    padding:0 0 0 0; 
} 

.text img { 
    width:100%; 
    height:auto; 
} 

.facebook { 
    margin:2px 0 0 0; 
} 

.facebook img { 
    width: 100%; 
    height:auto; 
} 

.contact nav ul { 
    list-style:none; 
} 

.sports { 
    margin:2px 0 0 0; 
} 

.sports img { 
    width:100%; 
    height:auto; 
} 

.contact { 
    background-color:#fb9648; 
    height:auto; 
    margin:2px 0 0 0; 
    padding-top:10px; 
} 

.contact img { 
    padding-left:12%; 
    margin-bottom:5%; 
} 

.contact nav { 
    background-color: #fb9648; 
    height:50px; 
} 

.contact nav ul .bild, .contact nav ul .text, .contact nav ul .spacer { 
    margin:0 0 0 0; 
    display:inline; 
    float:left; 
} 

.bild { 
    width:15%; 
    height:auto; 
} 

.contact nav ul .bild img { 
    width: 40px; 
    height:auto; 
} 

.contact nav ul .spacer { 
    width: 5%; 
} 

.contact nav ul .text { 
    height:40px; 
    width: 30%; 
} 

@media only screen and (min-width: 10cm) and (max-width: 18cm) 
{ 

    .wrapper { 
     width:80%; 
    } 



} 

@media only screen and (min-width: 1cm) and (max-width: 10cm) 

{ 
    .wrapper { 
     width:100%; 
    } 

    .contact img { 
     width:80%; 
     margin-bottom: 2%; 
    } 

} 



</style> 
</head> 

<body> 

<table class="wrapper"> 
    <tr> 
    <td class="slim">&nbsp; 

    </td> 
    </tr> 
</table> 
<table class="wrapper"> 
    <tr> 
    <td class="logo"> 
     <a href="http://www.taste4sports.com" target="_blank"> 
      <img src="http://www.taste4sports.com/images/logo_email.jpg" /> 
     </a> 
    </td> 
    </tr> 
</table> 
<table class="wrapper"> 
    <tr> 
    <td class="text"> 
    <a href="http://www.taste4sports.com" target="_blank"> 
     <img src="http://www.s4ea.org/images/text4.jpg" /> 
    </a> 
    </td> 
    </tr> 
</table> 
<table class="wrapper"> 
    <tr> 
    <td class="facebook"> 
    <a href="https://www.facebook.com/SPORTS4ea?ref=ts&fref=ts" target="_blank"> 
     <img src="http://www.s4ea.org/images/facebook7.jpg" /> 
    </a> 
    </td> 
    </tr> 
</table> 
<table class="wrapper"> 
    <tr> 
    <td class="sports"> 
     <a href="http://www.s4ea.org" target="_blank"> 
      <img src="http://www.taste4sports.com/images/support.jpg" /> 
     </a> 
    </td> 
    </tr> 
</table> 
<table class="wrapper"> 
    <tr> 
    <td class="contact"> 
     <img src="http://www.taste4sports.com/images/contact/phone.jpg" /> 
     <img src="http://www.taste4sports.com/images/contact/fax.jpg" /> 
      <a href="http://www.taste4sports.com" target="_blank"> 
       <img src="http://www.s4ea.org/images/internet_back2.jpg" /> 
      </a> 
     <a href="mailto:[email protected]"> 
      <img src="http://www.s4ea.org/images/@.jpg" /> 
     </a> 
    </td> 
    </tr> 
</table> 


</body> 
</html>

출처

2014-05-21 user3546800

아닌 스크린 샷 ... – David

당신이 고생하는 – JustMichael

. 뭔가를 가리 수있는 CSS를 suppport 행렬이 사이트를 체크 아웃 탈락되고 : 이전의 MS의 메일 클라이언트에 대한 불행하게도 웹 페이지와 같은 표준을 따르지 않는 전자 메일 및 지원

CSS Support for Outlook

출처

2014-05-21 18:34:37

HTML이 될 수 있습니다 이전 버전의 IE를 지원하는 것만 큼 나쁜 것입니다. CSS 재설정 및 템플릿으로 HTML E-mail Boilerplate을 확인하십시오.이 템플릿은 s ** t처럼 보이지 않는 뉴스 레터 시작에 이상적입니다.

출처

2014-05-21 18:51:32

MS Outlook은 Microsoft Word를 사용하여 HTML 전자 메일을 렌더링합니다. 유감스럽게도 구독자가 사용하는 Outlook 버전에 따라 스파 스 형식조차도 지원할 수 있습니다. 먼저, 가장 중요한 고객이 무엇을 사용하고 있는지 확인하십시오 (MailChimp 또는 다른 서비스를 사용하는 경우 인구 통계 데이터를 알 수 있습니다) ... 그러면 어떤 종류의 CSS 기능이 지원되는지 확인할 수 있습니다.

참조 : Outlook을 원하기 때문에 http://kb.mailchimp.com/campaigns/previews-and-tests/my-campaign-looks-bad-in-outlook 두 번째 링크는 로그인 페이지로 이동

출처

2015-01-26 19:31:35

Outlook에서 전자 메일이 보이는 이유는 무엇입니까?

답변

관련 문제