2017-02-24 5 views
0

전자 메일 서명에 문제가 있습니다. Outlook에서 회신 할 때 엉망이됩니다.전자 메일 서명이 응답시 엉망이되었습니다.

현재 상황 : Outlook 2016 (Mac)의 서명이 포함 된 이메일을 Outlook 2007 (Windows)에서 보낼 때 멋지게 보입니다. 이메일에 회신 할 때 여전히 좋아 보입니다. 해당 전자 메일에 회신하면 서명이 엉망이됩니다. 스크린 샷 : enter image description here

내 코드 :

<!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" /> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

<title></title> 

<style type="text/css"> 
/* Client-specific Styles */ 

#outlook a { 
    padding: 0; 
} /* Force Outlook to provide a "view in browser" menu link. */ 
body { 
    width: 100% !important; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    margin: 0; 
    padding: 0; 
} 
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */ 
.ExternalClass { 
    width: 100%; 
} /* Force Hotmail to display emails at full width */ 
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,  .ExternalClass td, .ExternalClass div { 
    line-height: 100%; 
} /* Force Hotmail to display normal line spacing. */ 
#backgroundTable { 
    margin: 0; 
    padding: 0; 
    width: 100% !important; 
    line-height: 100% !important; 
} 
img { 
    outline: none; 
    text-decoration: none; 
    border: none; 
    -ms-interpolation-mode: bicubic; 
} 
a img { 
    border: none; 
} 
.image_fix { 
    display: block; 
} 
p { 
    margin: 0px 0px !important; 
} 
table td { 
    border-collapse: collapse; 
} 
table { 
    border-collapse: collapse; 
    mso-table-lspace: 0pt; 
    mso-table-rspace: 0pt; 
} 

/*##############################################*/ 
/*IPHONE STYLES*/ 
/*##############################################*/ 
@media only screen and (max-width: 480px) { 
    table { 
    position: relative; 
} 

table[class="fluid-table"], td[class="fluid-cell"]{ 
    width: 100% !important; 
} 

} 
</style> 

</head> 


<body> 
<div class="block"> 

    <!-- Start of name, function title and logo --> 

    <table border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
     <tbody> 

      <tr> 
      <td style="display:block; border:none; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
       <span style="text-align: left; color: #9C1C27;font-size: 15px; font-weight: bold">Voornaam en Achternaam</span><br/> 
       <span style="text-align: left; color: #B5987F; font-weight: normal; font-style:italic; font-size: 14px;">Functie titel</span><br/> 
     </td> 
     </tr> 
     <tr> 
      <td> 
       <a href="http://www.deleeuwhides.com/"><img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px; padding: 10px 0 5px 0;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" /></a> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<!-- End of name, function and logo --> 

<table cellpadding="0" cellspacing="0" border="0" width="100%"> 
    <tr> 
     <td><table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table"> 
      <tr> 

      <!-- Start of first column --> 

      <td><table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
       <tbody> 

        <tr> 
        <td width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
         <strong style="color:#9C1C27;">Location Nijmegen</strong><br/> 
         Lindenhoutseweg 69<br/> 
         6545 AH Nijmegen <br/> 
         The Netherlands 
        </td> 
        </tr> 

       </tbody> 
       </table> 

       <!-- End of first column --> 


       <!-- Start of second column --> 

       <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
       <tbody> 

        <tr> 
        <td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
         <strong style="color:#9C1C27;">Location Winterswijk</strong><br/> 
         Industrieweg 2a<br/> 
         7102 DZ Winterswijk<br/> 
         The Netherlands 
        </td> 
        </tr> 
       </tbody> 
       </table> 

       <!-- End of second column --> 



       <!-- Start of third column --> 

       <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
       <tbody> 
        <tr> 
        <td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
          <a href="tel:0031-024-3775233" style="color:#B5987F;">T:0031-024-3775233</a> <br/> 
          <span style="text-decoration:none">F: 0031-024-3779316</span> <br/> 
          <a style="text-decoration:none; color:#9C1C27;" href="mailto:[email protected]"><span style="text-decoration:none; color:#9C1C27;">[email protected]</span></a><br/> 
          <a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a> 
         </td> 
        </tr> 
       </tbody> 
       </table> 

       <!-- End of third column --> 
      </td> 
      </tr> 
     </table> 


     <!-- Start of branding identity elements --> 
     <table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table"> 
      <tr> 
       <td style="height:3px; width:100%; background-color:#B5987F;"> 
       </td> 
      </tr> 
     </table> 

     <table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table"> 
      <tr> 
       <td style="height:2px; width:100%; background-color:#fff;"> 
       </td> 
      </tr> 
     </table> 


      <table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table"> 
        <tr> 
         <td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center> 
         </td> 
        </tr> 
      </table> 
     <!-- End of branding identity elements--> 

     </td> 
    </tr> 
    </table> 

</div> 
</body> 
</html> 

나는이 어떻게 이런 일이 해결할 수 있으며, 왜?

답변

0

Welll, "이메일은 어렵습니다."

일반적으로 전자 메일을 처리 할 때 CSS 스타일을 인라인하는 것이 좋습니다. 나는 Litmus의 this tool을 사용하며, 이메일 (Gmail은 특별히)에 좋게 보이는 HTML 콘텐츠 개발의 함정에 대해서도 a pretty good article을 가지고 있습니다.

+0

감사 :

이 관심이 있거나 내가했던 것과 같은 문제가 누군가를 위해 내 코드입니다! 예 이메일은 정말 어렵습니다. 그러나 문제는 Gmail이 아닙니다. 나는 그것을 테스트했고 내가 볼 수있는 한 지금까지 작동하고있다. 문제는 Outlook이고 특별히 Outlook 2007이라고 생각합니다. 문제가 세 번째 회신 후에 만 ​​발생한다는 것은 너무 이상합니다. 나는 확실히 값 비싼 물건을 시험해보고, 뒤로보고 할 것이다. – michelle88

+0

Gmail이 아니라는 것을 알고 있습니다. 나는 내가 한 일을보고하고 싶었다. Outlook은 이러한 유형의 동작에 대해 매우 악명 높았으며 코드를 수정했는지 알고 싶었습니다. 테스트 용으로 Outlook Mac이 부족했기 때문에 putsmail을 사용하여 코드를 편집하지 않았습니다. – gwally

+0

다시 한번 감사드립니다. 차이를 만들지 않은 valign = top으로 테스트했습니다. 그런 다음 모든 비 인라인 CSS 코드를 제거하고 테스트 한 결과 작동하지 않았습니다. 또한 정말 이상한 점은 최근 답장에서이 문제가 나타나지 않는다는 것입니다. 그 전에 항상 그것들입니다. Gmail과 마찬가지로 테스트를 해본 결과 같은 결과가 나왔습니다. 정말 Outlook 2007의 문제 인 것 같습니다. 내가 회신 할 때만 왜 내 마음을 감쌀 수 없어.당신이 그것을 보낼 때 괜찮아 보이는가, 그럼 원래의 이메일을 회신하면 서명 엉망이옵니다. – michelle88

0

내가, 내 아웃룩 주소로 http://putsmail.com에서 나에게 메시지를 보내 내 Gmail로 대답 한 후 다시 내 Outlook으로 대답이있어 :

enter image description here

난 다시 Gmail로 대답하면 보았다 벌금.

내 제안은 해당 테이블의 tr 및 td 셀에 valign="top"을 추가하는 것입니다. 이렇게하면 표 셀이 강제로 정렬됩니다.

`

 <!-- Start of first column --> 

     <td valign="top"> 
      <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
      <tbody> 

       <tr valign="top"> 
       <td valign="top" width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
        <strong style="color:#9C1C27;">Location Nijmegen</strong><br/> 
        Lindenhoutseweg 69<br/> 
        6545 AH Nijmegen <br/> 
        The Netherlands 
       </td> 
       </tr> 

      </tbody> 
      </table> 

      <!-- End of first column --> 


      <!-- Start of second column --> 

      <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
      <tbody> 

       <tr valign="top"> 
       <td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
        <strong style="color:#9C1C27;">Location Winterswijk</strong><br/> 
        Industrieweg 2a<br/> 
        7102 DZ Winterswijk<br/> 
        The Netherlands 
       </td> 
       </tr> 
      </tbody> 
      </table> 

      <!-- End of second column --> 



      <!-- Start of third column --> 

      <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
      <tbody> 
       <tr valign="top"> 
       <td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
         <a href="tel:0031-024-3775233" style="color:#B5987F;">T:0031-024-3775233</a> <br/> 
         <span style="text-decoration:none">F: 0031-024-3779316</span> <br/> 
         <a style="text-decoration:none; color:#9C1C27;" href="mailto:[email protected]"><span style="text-decoration:none; color:#9C1C27;">[email protected]</span></a><br/> 
         <a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a> 
        </td> 
       </tr> 
      </tbody> 
      </table> 

      <!-- End of third column --> 
     </td> 
     </tr> 
    </table> 


    <!-- Start of branding identity elements --> 
    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table"> 
     <tr> 
      <td style="height:3px; width:100%; background-color:#B5987F;"> 
      </td> 
     </tr> 
    </table> 

    <table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table"> 
     <tr> 
      <td style="height:2px; width:100%; background-color:#fff;"> 
      </td> 
     </tr> 
    </table> 


     <table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table"> 
       <tr> 
        <td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center> 
        </td> 
       </tr> 
     </table> 
    <!-- End of branding identity elements--> 

    </td> 
</tr> 

`

0

그것을 해결! 먼저 각 열을 서로 나란히 놓는 데 도움이되는 모든 정렬 특성을 제거했습니다. 그런 다음 모든 테이블을 제거하고 모든 것을 포함하는이 래퍼 테이블에 중첩 된 테이블로 "래퍼"테이블을 만들었습니다. 나는 분명히 이것을 설명하고 싶다. 어쨌든이게 내 모든 문제를 해결했습니다! 당신의 답변을 모두

<!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" /> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

<title></title> 

<style type="text/css"> 
/* Client-specific Styles */ 

#outlook a { 
    padding: 0; 
} /* Force Outlook to provide a "view in browser" menu link. */ 
body { 
    width: 100% !important; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    margin: 0; 
    padding: 0; 
} 
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */ 
.ExternalClass { 
    width: 100%; 
} /* Force Hotmail to display emails at full width */ 
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { 
    line-height: 100%; 
} /* Force Hotmail to display normal line spacing. */ 
#backgroundTable { 
    margin: 0; 
    padding: 0; 
    width: 100% !important; 
    line-height: 100% !important; 
} 
img { 
    outline: none; 
    text-decoration: none; 
    border: none; 
    -ms-interpolation-mode: bicubic; 
} 
a img { 
    border: none; 
} 
.image_fix { 
    display: block; 
} 
p { 
    margin: 0px 0px !important; 
} 

table td{ 
    border-collapse: collapse; 
    border-spacing:0; 
    mso-table-lspace: 0pt; 
    mso-table-rspace: 0pt; 
} 

/*##############################################*/ 
/*IPHONE STYLES*/ 
/*##############################################*/ 
@media only screen and (max-width: 480px) { 
table { 
    position: relative; 
} 

table[class="fluid-table"], td[class="fluid-cell"]{ 
    width: 100% !important; 
} 

} 
</style> 

</head> 


<body> 
<div class="block"> 

    <!-- Start of wrapper table --> 
    <table cellpadding="0" cellspacing="0" border="0" width="100%"> 
     <tr> 
      <td> 
      <table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table"> 

    <!-- Start of name, function title and logo --> 
      <tr> 
      <td style="padding-bottom:3px; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;"> 
        <strong style="color: #9C1C27;font-size: 15px;">Voornaam en Achternaam</strong><br/> 
        <em style="color: #B5987F; font-weight: normal; font-size: 14px;">Functie titel</em><br/> 
      </td> 
      </tr> 

      <tr> 
       <td style="padding-bottom:5px;"> 
        <a href="http://www.deleeuwhides.com/"><img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="display:block; width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" /></a> 
       </td> 
      </tr> 
    <!-- End of name, function and logo --> 


       <!-- Contact info and Start of first column --> 
         <tr> 
         <td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;"> 
          <strong style="color:#9C1C27;">Location Nijmegen</strong><br/> 
          Lindenhoutseweg 69<br/> 
          6545 AH Nijmegen <br/> 
          The Netherlands 
         </td> 
        <!-- End of first column --> 


        <!-- Start of second column --> 
         <td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;"> 
         <strong style="color:#9C1C27;">Location Winterswijk</strong><br/> 
          Industrieweg 2a<br/> 
          7102 DZ Winterswijk<br/> 
          The Netherlands 
         </td> 
        <!-- End of second column --> 

        <!-- Start of third column --> 
         <td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;"> 
           <a href="tel:0031-024-3775233" style="color:#B5987F;">T:0031-024-3775233</a> <br/> 
           <span style="text-decoration:none">F: 0031-024-3779316</span> <br/> 
           <a style="text-decoration:none; color:#9C1C27;" href="mailto:[email protected]"><span style="text-decoration:none; color:#9C1C27;">[email protected]</span></a><br/> 
           <a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a> 
          </td> 
         </tr> 
        </table> 
      <!-- End of third column and contact info --> 


      <!-- Start of branding identity elements --> 

       <tr> 
        <td bgcolor="#B5987F" style="height:3px; width:100%;"></td> 
       </tr> 

       <tr> 
        <td bgcolor="#ffffff" style="height:3px; width:100%;"></td> 
       </tr> 
         <tr> 
          <td valign="middle" bgcolor="#9C1C27" style="height:30px; width:100%;"> 
           <center> 
            <img style="display:block;"src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan" /> 
           </center> 
          </td> 
         </tr> 

      <!-- End of branding identity elements --> 

       </td> 
      </tr> 
     </table> 
     <!-- end of wrapper table --> 

</div> 
</body> 
</html>