Блог

Главная - Вопросы по программированию - Электронная почта Outlook 2007 отображается без центрирования

Электронная почта Outlook 2007 отображается без центрирования

#html #ruby-on-rails-3 #email #outlook #outlook-2007

#HTML #ruby-on-rails-3 #Адрес электронной почты #outlook #outlook-2007

Вопрос:

Всем привет, у меня возникла большая проблема с отображением электронной почты в 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 все выглядит очень хорошо.

Пожалуйста, помогите.

Ответ №1:

У меня это работает в Outlook 2010, который отображает электронные письма так же, как в 2007 (я использовал приведенный ниже точный код, который сработал). Я поместил ее в пару таблиц, первая из которых занимает 100% окна, затем другая шириной 600 пикселей, выровненная по центру. Также, в качестве дополнительного примечания, помните, что 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>