我的代码在Outlook 2010中歪斜

这在正常客户端中正常工作，但由于我们知道Outlook是个婊子，它对我来说看起来不错，但有人能告诉我为什么这不会在Outlook中呈现？我的代码在Outlook 2010中歪斜

<table id="contentArea"> 
     <tr> 
     <td> 

      <p>Welcome to the TeraTitan family ${user['FirstName']},</p> 
      <p>Please tell us which services you are interested in currently:</p> 


      <table align="center"> 
      <tr align="center"> 
      <td><a href="http://www.teratitan.com/info/mortgage"><img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</a></p></td> 
      <td><a href="http://www.teratitan.com/info/savings"><img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</a></p></td> 
      <td><a href="http://www.teratitan.com/info/homeequity"><img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</a></p></td> 
      </tr> 


      </table> 
      <p>You can also visit us on-line at <a href="http://www.teratitan.com">TeraTitan</a>, or call us with any questions you may have at 800-555-1212.</p> 
     </td> 
     </tr> 
    </table> 
    <!-- End Table for content-->

感谢

来源

2013-10-17 Liam Coates

究竟是不是呈现？你能向我们展示比较截图吗？你可能想要正确地设计你的图片的html电子邮件。（display：block; and img property border =“0”） –

img托管网站在工作时被阻止 - 即使您建议进行这些更改，它也会突然出现。即使我调整到100x100，图像仍会变大。 –

你有没有试过把你的文字放在桌子的另一排上？ Outlook会尝试最好将单元内的元素进行浮动，但它无法猜测你真的想要做什么。如果可能的话，html-emails的技巧是按照类型分隔元素。如果您同时拥有文字和图片，那么文字应该位于他们自己的单元格中，以及图片中。表格单元格中的一个元素也将帮助您准确查看问题的位置。 –

我有R Lacome。渲染问题究竟是什么？

此外，似乎有一些“草率”编码的东西。有时候这并没有什么区别，但是如果你的代码是“马虎”的，你就不会知道你真正的问题在哪里。

下面是一些调整清理HTML。尝试运行，看看它是否修复你的渲染问题。我还应该注意，没有大量内联CSS <p>标签在电子邮件客户端中不提供很多一致性。

<table id="contentArea" width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td align="left"> 
     <p>Welcome to the TeraTitan family ${user['FirstName']},</p> 
     <p>Please tell us which services you are interested in currently:</p> 
     </td> 
    </tr> 
    <tr> 
     <td align="left"> 
     &nbsp; 
     </td> 
    </tr> 
    <tr> 
     <td align="center"> 
     <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
      <td align="center"> 
       <a href="http://www.teratitan.com/info/mortgage"> 
       <img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg"> 
       <p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</p> 
       </a> 
      </td> 
      <td align="center"> 
       <a href="http://www.teratitan.com/info/savings"> 
       <img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9"> 
       <p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</p> 
       </a> 
      </td> 
      <td align="center"> 
       <a href="http://www.teratitan.com/info/homeequity"> 
       <img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg"> 
       <p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</p> 
       </a> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </td> 
    <tr> 
     <td align="left"> 
     &nbsp; 
     </td> 
    </tr> 
    <tr> 
     <td align="left"> 
     <p>You can also visit us on-line at <a href="http://www.teratitan.com">TeraTitan</a>, or call us with any questions you may have at 800-555-1212.</p> 
     </td> 
    </tr> 
    </table> 

    <!-- End Table for content-->

来源

2013-10-18 01:44:23

我的代码在Outlook 2010中歪斜

回答

相关问题