2017-01-10 47 views
0

我創建了一封HTML電子郵件,但是當我在Outlook 2010中測試電子郵件時,我在電子郵件的頂部獲得了大量空間,並且不確定其導致此問題的原因因爲它在codepen中看起來很好。HTML電子郵件 - 在Outlook中保留空格作爲我的電子郵件的頂部

下面的代碼段是我使用的代碼和代碼筆的鏈接,因此您可以準確地看到它的樣子。

任何幫助,非常感謝。

http://codepen.io/beckyking99/pen/gLVRxE

<html bgcolor="#F7F8F8" style="background-color:#F7F8F8; padding: 0; margin: 0;"> 
 
<head> 
 
    <title>IT Supoort Ticket</title> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
 
    <meta content="width=device-width" name="viewport" /> 
 
    </head> 
 
<body bgcolor="#F7F8F8" style='-webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width:100% !important; height:600px !important; padding: 0 !important; margin: 0 !important; font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; background-color:#F7F8F8'> 
 
    <table cellpadding="0" cellspacing="0" class="container" id="container" style="margin:0 auto; width:600px; padding: 0 !important;" width="600"> 
 
    <tr> 
 
     <td class="outer" style="padding: 0; margin: 0;"> 
 
     <table cellpadding="0" cellspacing="0" class="container" id="header" style="margin:0 auto; width:600px" width="600"> 
 
      <tr> 
 
      <td align="center" bgcolor="#1D2C36" style="vertical-align:top; background-color:#1D2C36; text-align:center; padding:50px; border-top-left-radius:3px; border-top-right-radius:3px"> 
 
       <a href="http://westovergroup.co.uk" target="_blank" title="Westover"> 
 
       <img alt="Westover" height="100" src="http://westovermarketing.co.uk/images/Westover-white.png" style="max-width:100%" title="Westover Logo" width="180" /> 
 
       </a> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     <table cellpadding="0" cellspacing="0" class="container" id="body" style="margin:0 auto; width:600px" width="600"> 
 
      <tr> 
 
      <td bgcolor="#fff" class="body" style="vertical-align:top; padding:0px 64px; border-left:1px solid #E6E8E9; border-right:1px solid #E6E8E9; border-bottom:1px solid #E6E8E9; background-color:#fff; border-bottom-left-radius:3px; border-bottom-right-radius:3px"> 
 
       <table cellpadding="0" cellspacing="0" id="body-inner"> 
 
       <tr> 
 
        <td class="intro-copy" style="vertical-align:top; padding-bottom:0px"> 
 
        <p style="color:#1D2C36; line-height:22px; padding:10px 0; font-size:15px">${StatusNotification} <br /> 
 

 
Thank you for logging your call with the Westover Group IT Department. Your call details are shown below, and we will be in touch as soon as possible.</p> 
 
        <p style="color:#1D2C36; line-height:22px; padding:10px 0; font-size:15px"> 
 
#if(${Notes} && ${Notes}!="") <br /> 
 
Updated Notes: ${Notes} <br /> 
 
#end 
 

 
Title: ${Title} <br /> 
 
Description: ${Description} <br /> 
 
Assigned To: ${AssignedTo} <br /> 
 
#if(${LinkToAttachments} && ${LinkToAttachments}!="") <br /> 
 
Attachments: ${LinkToAttachments} <br /> 
 
#end 
 
</p> 
 
        <p style="color:#1D2C36; line-height:22px; padding:10px 0; font-size:15px"> 
 
#if(${isClosedSR}==true && ${LinkToSurvey} && ${LinkToSurvey}!="") 
 
Please fill out this Survey: ${LinkToSurvey} <br /> 
 
#end 
 
</p> 
 
        <p style="color:#1D2C36; line-height:22px; padding:10px 0; font-size:15px"> 
 
#if(${AfterHours} && ${AfterHours}==true && ${IsNewSr}==true) <br /> 
 
The Helpdesk is not active at the moment, your service record will be addressed during working hours. <br /> 
 
Operating Times: $OperatingTimesTable 
 
#end</p> 
 
        </td> 
 
       </tr> 
 
<tr> 
 
        <td class="outro-copy" style="vertical-align:top"> 
 
        <p style="color:#1D2C36; line-height:22px; padding:10px 0; font-size:15px">Kind Regards, <br /> 
 
         IT Help Desk</p> 
 
        </td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td align="center" class="footer" style="vertical-align:top; padding-top:10px; text-align:center"> 
 
       <table cellpadding="0" cellspacing="0" id="footer" style="width:250px; margin:0 auto" width="250"> 
 
           <tr> 
 
        <td align="center" class="copyright" colspan="5" style="text-align:center; vertical-align:middle; padding:0 5px; font-size:11px; color:#7B858B">© 2016 Westover Group</td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

回答

0

我做你的所有的CSS內聯,除去高度600像素。 見下文。祝你好運。

<html> 
<head> 
    <title>IT Supoort Ticket</title> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta content="width=device-width" name="viewport"> 
    </head> 
<body bgcolor="#F7F8F8" style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; background-color: #F7F8F8; margin: 0; padding: 0;"> 
    <table cellpadding="0" cellspacing="0" class="container" id="container" style="width: 600px; margin: 0 auto; padding: 0;" width="600"> 
    <tr> 
     <td class="outer" style="margin: 0; padding: 0;"> 
     <table cellpadding="0" cellspacing="0" class="container" id="header" style="width: 600px; margin: 0 auto;" width="600"> 
      <tr> 
      <td align="center" bgcolor="#1D2C36" style="vertical-align: top; background-color: #1D2C36; text-align: center; border-top-left-radius: 3px; border-top-right-radius: 3px; padding: 50px;" valign="top"> 
       <a href="http://westovergroup.co.uk" target="_blank" title="Westover"> 
       <img alt="Westover" height="100" src="http://westovermarketing.co.uk/images/Westover-white.png" style="max-width: 100%;" title="Westover Logo" width="180"> 
       </a> 
      </td> 
      </tr> 
     </table> 
     <table cellpadding="0" cellspacing="0" class="container" id="body" style="width: 600px; margin: 0 auto;" width="600"> 
      <tr> 
      <td bgcolor="#fff" class="body" style="vertical-align: top; border-left-color: #E6E8E9; border-left-style: solid; border-left-width: 1px; border-right-width: 1px; padding: 0px 64px; border-right-color: #E6E8E9; border-right-style: solid; border-bottom-color: #E6E8E9; border-bottom-style: solid; border-bottom-width: 1px; background-color: #fff; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;" valign="top"> 
       <table cellpadding="0" cellspacing="0" id="body-inner"> 
       <tr> 
        <td class="intro-copy" style="vertical-align: top; padding-bottom: 0px;" valign="top"> 
        <p style="color: #1D2C36; line-height: 22px; font-size: 15px; padding: 10px 0;">${StatusNotification} <br> 

Thank you for logging your call with the Westover Group IT Department. Your call details are shown below, and we will be in touch as soon as possible.</p> 
        <p style="color: #1D2C36; line-height: 22px; font-size: 15px; padding: 10px 0;"> 
#if(${Notes} &amp;&amp; ${Notes}!="") <br> 
Updated Notes: ${Notes} <br> 
#end 

Title: ${Title} <br> 
Description: ${Description} <br> 
Assigned To: ${AssignedTo} <br> 
#if(${LinkToAttachments} &amp;&amp; ${LinkToAttachments}!="") <br> 
Attachments: ${LinkToAttachments} <br> 
#end 
</p> 
        <p style="color: #1D2C36; line-height: 22px; font-size: 15px; padding: 10px 0;"> 
#if(${isClosedSR}==true &amp;&amp; ${LinkToSurvey} &amp;&amp; ${LinkToSurvey}!="") 
Please fill out this Survey: ${LinkToSurvey} <br> 
#end 
</p> 
        <p style="color: #1D2C36; line-height: 22px; font-size: 15px; padding: 10px 0;"> 
#if(${AfterHours} &amp;&amp; ${AfterHours}==true &amp;&amp; ${IsNewSr}==true) <br> 
The Helpdesk is not active at the moment, your service record will be addressed during working hours. <br> 
Operating Times: $OperatingTimesTable 
#end</p> 
        </td> 
       </tr> 
<tr> 
        <td class="outro-copy" style="vertical-align: top;" valign="top"> 
        <p style="color: #1D2C36; line-height: 22px; font-size: 15px; padding: 10px 0;">Kind Regards, <br> 
         IT Help Desk</p> 
        </td> 
       </tr> 
       </table> 
      </td> 
      </tr> 
      <tr> 
      <td align="center" class="footer" style="vertical-align: top; padding-top: 10px; text-align: center;" valign="top"> 
       <table cellpadding="0" cellspacing="0" id="footer" style="width: 250px; margin: 0 auto;" width="250"> 
           <tr> 
        <td align="center" class="copyright" colspan="5" style="text-align: center; vertical-align: middle; font-size: 11px; color: #7B858B; padding: 0 5px;" valign="middle">© 2016 Westover Group</td> 
       </tr> 
       </table> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
</body> 

</html> 
+0

非常感謝您的支持,但是我仍然在Outlook 2010中收到我的電子郵件頂部的巨大差距?任何更多的想法如何消除這一點? –