Question

大家好，我在Outlook 2007中渲染电子邮件时遇到很大问题，除了那个客户端，其他客户端的一切都很好看：

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
  </head>
  <body style='background: #f2aa58; font-family: Helvetica, Arial, Verdana, Trebuchet MS;     font-size: 14px; line-height: normal;'>
    <style>
      /*<![CDATA[*/
        a { color: black; }
      /*]]>*/
    </style>
     <center style='margin: 30px 0;'>
       <div style='width: 600px; margin: 0 auto; height: 241px; background: #fff;'>
        <img height='241' src='http://xxxxxxxx.com/email_content/logo.jpg' width='600'>
       </div>
       <div style='width: 600px; margin: 0 auto; height: 55px; background: #fff;'>
        <img height='55' src='http://xxxxxxxx.com/email_content/logo_title.png' width='600'>
      </div>
      <div style='width: 600px; height: 5px; margin: 0 auto; background: #f2aa58;'></div>
      <div style='width: 560px; margin: 0 auto; background: #fff; padding: 20px; text-align: left;'>
         <p>Dear Test1,</p>
         <p>We are pleased to inform.</p>
         <p>You can check all details in your <a href="http://lxxxxx”>XXXXXXX</a></p>
         <p>Thank you!</p>
         <p>
           Kind Regards,
          <br>
           XXXXXX
        </p>
         <p>P.S. XXXXXXX</p>
      </div>
      <div style='width: 600px; height: 5px; margin: 0 auto; background: #f2aa58;'></div>
      <div style='width: 560px; margin: 0 auto; background: #fff; padding: 20px; text-align: left;'>
        This is an automatically generated email, please do not reply.
       </div>
      <div style='width: 600px; height: 5px; margin: 0 auto; background: #f2aa58;'></div>
      <div style='width: 560px; margin: 0 auto; background: #fff; padding: 20px; text-align: left;'>
        XXXXXXXXXXX
        <br>
        XXXXXXXXXXX
        <BR></BR>
        <a href='https://xxxxxxxxx.com' style='color: black;' target='_blank'>xxxxxx.com</a>
      </div>
    </center>
  </body>
</html>

结果是没有像它应该集中的那样，例如在gmail web客户端中，一切看起来都很好。

请帮忙。

Answer 1

这适用于我在Outlook 2010中，它使电子邮件与2007年相同（我使用下面的确切代码 - 这是有效的）。我将它包裹在一对桌子中，第一个覆盖100％的窗口，然后另一个宽600px并在中央对齐。另外，作为旁注，请记住，Outlook不会读取您的样式数据，只会读取内联CSS样式。因此a { color: black; }将被忽略。

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
  </head>
  <body style='background: #f2aa58; font-family: Helvetica, Arial, Verdana, Trebuchet MS;     font-size: 14px; line-height: normal;'>
    <style>
      /*<![CDATA[*/
        a { color: black; }
      /*]]>*/
    </style>
<table width="100%"><tr><td>
<table width="600px" align="center"><tr><td>
     <center style='margin: 30px 0;'>
       <div style='width: 600px; margin: 0 auto; height: 241px; background: #fff;'>
        <img height='241' src='http://xxxxxxxx.com/email_content/logo.jpg' width='600'>
       </div>
       <div style='width: 600px; margin: 0 auto; height: 55px; background: #fff;'>
        <img height='55' src='http://xxxxxxxx.com/email_content/logo_title.png' width='600'>
      </div>
      <div style='width: 600px; height: 5px; margin: 0 auto; background: #f2aa58;'></div>
      <div style='width: 560px; margin: 0 auto; background: #fff; padding: 20px; text-align: left;'>
     <p>Dear Test1,</p>
     <p>We are pleased to inform.</p>
     <p>You can check all details in your <a href="http://lxxxxx”>XXXXXXX</a></p>
     <p>Thank you!</p>
     <p>
       Kind Regards,
      <br>
       XXXXXX
    </p>
     <p>P.S. XXXXXXX</p>
  </div>
  <div style='width: 600px; height: 5px; margin: 0 auto; background: #f2aa58;'></div>
  <div style='width: 560px; margin: 0 auto; background: #fff; padding: 20px; text-align: left;'>
    This is an automatically generated email, please do not reply.
   </div>
  <div style='width: 600px; height: 5px; margin: 0 auto; background: #f2aa58;'></div>
  <div style='width: 560px; margin: 0 auto; background: #fff; padding: 20px; text-align: left;'>
    XXXXXXXXXXX
    <br>
    XXXXXXXXXXX
    <BR></BR>
    <a href='https://xxxxxxxxx.com' style='color: black;' target='_blank'>xxxxxx.com</a>
  </div>
</center>

</td></tr></table>
</td></tr></table>
  </body>
</html>

Outlook 2007电子邮件没有居中

1 个答案: