HTML电子邮件 - 在Outlook中将空格放在我的电子邮件顶部

时间：2017-01-10 16:14:45

标签： html email

我已经创建了一个HTML电子邮件但是当我在Outlook 2010中测试电子邮件时，我在电子邮件的顶部获得了一个巨大的空间，并且不确定它是什么导致了它，因为它在codepen中看起来很好。

下面的代码段是我正在使用的代码和代码笔的链接，因此您可以准确地看到它的外观。

非常感谢任何帮助。

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>

1 个答案:

答案 0 :(得分：0)

我将你的所有css内联，删除高度600px。 见下文。祝你好运。

<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>
相关问题
最新问题