我的代碼在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中歪斜

回答

相關問題