2015-07-06 3 views
-1

Я делаю шаблон электронной почты, он прекрасно работает на все почтовые службах, за исключением Microsoft Outlook 2007/2010 ..Microsoft Outlook не показывает правильный шаблон электронной почты

Вот как его должно выглядеть

http://i.stack.imgur.com/Yi1SP.png

Вот как это выглядит на перспективы

http://i.imgur.com/eRvu3sY.jpg

Вот взгляд в коде само по себе

<html> 
<head> 
    <title>Robot Coupe</title> 
</head> 
<body> 
<p>&lt;%body%&gt;</p> 

<table border="1" cellpadding="0" cellspacing="0" style="border: 1px solid red;" width="600"> 
    <tbody> 
     <tr> 
      <td style="line-height:0px; mso-line-height-rule:exactly;"> 
      <p><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><strong><a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img src="http://empaustralia.com.au/robot-coupe/logo.jpg" /></a></strong></span></span></p> 

      <p><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><strong><a href="http://www.robotcoupe.com.au" title="Robot Cook"><img src="http://empaustralia.com.au/robot-coupe/robot-cook.jpg" /></a></strong></span> <img align="right" height="524px" src="http://empaustralia.com.au/robot-coupe/robot-cook.png" width="266px" /></p> 

      <p><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /><span style="font-family:comic sans ms,cursive;">Emulsify, grind, blend, chop, mix and<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;knead to perfection.<br /> 
      <br /> 
      <img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" />Hot, cold, sweet or savoury - it&rsquo;s all up<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;to you!<br /> 
      <br /> 
      <img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" />High speed and enviable cutting<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;quality with the ability to heat<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;up to 140&deg;C<br /> 
      <br /> 
      <img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" />3.7 litre stainless-steel bowl</span></p> 

      <p><span style="font-family:comic sans ms,cursive;font-size:13px;">&nbsp;&nbsp;&nbsp;&nbsp;<font color="707070">&ldquo;I don&#39;t see it as a machine, I see it as one of<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;my chefs, with no days off. It&#39;s true, apart<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;from doing our daily recipes in the machine,<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;we&rsquo;re also constantly creating new techniques<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;and recipes with the Robot Cook. It&#39;s so<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;awesome I&rsquo;ll bring it to the next staff party, it&rsquo;s<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;part of my kitchen team!&rdquo;</font></span><br /> 
      <a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img align="left" alt="Bernard Chu" src="http://empaustralia.com.au/robot-coupe/Chu.jpg" style="padding:12px 0px 0px 0px" /></a><br /> 
      <span style="font-family:comic sans ms,cursive;font-size:13px;"><font color="#ed1c24"><strong>Bernard Chu</strong><br /> 
      LuxBite (South Yarra) and<br /> 
      T by LuxBite (Melbourne CBD)</font></span></p> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<table bgcolor="#ed1c24" border="0" cellpadding="0" cellspacing="0" width="600"> 
    <tbody> 
     <tr> 
      <td align="center" style="padding:10px 0px 10px 0px"><span style="font-family:comic sans ms,cursive;font-size:13px;"><font color="#ffffff">Call 02 9478 0300 to arrange a FREE demo in your kitchen.</font></span><br /> 
      <a href="mailto:[email protected]"><img src="http://empaustralia.com.au/robot-coupe/email.jpg" style="padding: 5px 0px 0px 0px" /></a></td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html> 
+0

Completly неправильное место, чтобы спросить о MS Outlook –

ответ

0

Дело в том, что Outlook использует Word (не IE) для рендеринга HTML-разметки писем. Все поддерживаемые и неподдерживаемые HTML элементы, атрибуты и каскадные таблицы стилей свойства вы можете найти описаны в следующих статьях в MSDN:

+0

Так что мне нужно изменить в коде? –

+0

Попробуйте прочитать статьи и посмотреть, какие элементы или свойства не поддерживаются в Word. –

1

код не создается с HTML электронной почты в уме. Я быстро исправился по электронной почте. Это ни в коем случае не является всеобъемлющим - не отзывчивым или мобильным. Но теперь это должно быть «лучше» в Outlook для вас, а также в других почтовых клиентах.

Есть еще много неправильного кода и макета - я бы посмотрел некоторые проработки и разработки и т. Д. И узнал, как правильно отформатирован HTML-адрес.

SitePoint

CampaignMonitor

Litmus

Смотрите код:

<html> 
<head> 
    <title>Robot Coupe</title> 
</head> 
<body> 
<p>&lt;%body%&gt;</p> 

<table border="0" cellpadding="0" cellspacing="0" style="border-width:1px; border-style:solid; border-color:red;" width="600"> 
    <tbody> 
     <tr> 
      <td style="line-height:0px; mso-line-height-rule:exactly;"> 
       <table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> 
       <tr> 
       <td align="left"><a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img src="http://empaustralia.com.au/robot-coupe/logo.jpg" /></a></td> 
       </tr> 
       <tr> 
       <td align="left"><a href="http://www.robotcoupe.com.au" title="Robot Cook"><img src="http://empaustralia.com.au/robot-coupe/robot-cook.jpg" /></a></td> 
       </tr> 
       </table> 
       <table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> 
       <tr> 
       <td align="left"> 
        <table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> 
        <tr> 
        <td align="left"> 
        <table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> 
        <tr> 
        <td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td> 
        <td align="left" style="font-family:comic sans ms,cursive; padding-bottom:10px;">Emulsify, grind, blend, chop, mix and<br /> 
      knead to perfection.</td> 
      </tr> 
      <tr> 
      <td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td> 
      <td align="left" style="font-family:comic sans ms,cursive; padding-bottom:10px;">Hot, cold, sweet or savoury - it&rsquo;s all up<br /> 
      to you!</td> 
      </tr> 
      <tr> 
      <td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td> 
      <td align="left" style="font-family:comic sans ms,cursive; padding-bottom:10px;">High speed and enviable cutting<br /> 
      quality with the ability to heat<br /> 
      up to 140&deg;C</td> 
      </tr> 
      <tr> 
      <td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td> 
      <td align="left" style="font-family:comic sans ms,cursive; padding-bottom:20px;">3.7 litre stainless-steel bowl</td> 
      </tr> 
      </table> 
      <table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> 
        <tr> 
        <td align="left" style="font-family:comic sans ms,cursive; font-size:13px;padding-left:9px;"><font color="707070">&ldquo;I don&#39;t see it as a machine, I see it as one of<br /> 
      my chefs, with no days off. It&#39;s true, apart<br /> 
      from doing our daily recipes in the machine,<br /> 
      we&rsquo;re also constantly creating new techniques<br /> 
      and recipes with the Robot Cook. It&#39;s so<br /> 
      awesome I&rsquo;ll bring it to the next staff party, it&rsquo;s<br /> 
      part of my kitchen team!&rdquo;</font></td> 
      </tr> 
      <tr> 
      <td align="center"> 
      <table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> 
      <tr> 
      <td align="left" style="font-family:comic sans ms,cursive; font-size:13px;padding-left:9px; padding-top:10px;"> 
      <a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img align="left" alt="Bernard Chu" src="http://empaustralia.com.au/robot-coupe/Chu.jpg" /></a></td> 
      <td align="left" style="font-family:comic sans ms,cursive; font-size:13px;padding-left:9px; padding-top:10px;"><font color="#ed1c24"><strong>Bernard Chu</strong><br /> 
      LuxBite (South Yarra) and<br /> 
      T by LuxBite (Melbourne CBD)</font></td> 
      </tr> 
      </table> 
      </td> 
      </tr> 
      </table> 
       </td> 
       <td align="right"><img align="right" height="524" src="http://empaustralia.com.au/robot-coupe/robot-cook.png" width="266" /></td> 
       </tr> 
       </table> 


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

<table bgcolor="#ed1c24" border="0" cellpadding="0" cellspacing="0" width="600"> 
    <tbody> 
     <tr> 
      <td align="center" style="padding:10px 0px 10px 0px"><span style="font-family:comic sans ms,cursive;font-size:13px;"><font color="#ffffff">Call 02 9478 0300 to arrange a FREE demo in your kitchen.</font></span></td> 
      </tr> 
      <tr> 
      <td align="center" style="padding:0 0px 10px 0px"> 
      <a href="mailto:[email protected]"><img src="http://empaustralia.com.au/robot-coupe/email.jpg" style="padding: 5px 0px 0px 0px" /></a></td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html> 
Смежные вопросы