2011-05-02 47 views
25

我有一個適用於大多數電子郵件客戶端的html通訊,但格式化在Outlook中搞砸了。爲Outlook設置格式的html電子郵件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
    body { 
    background-color: #98AFC7; 
    } 
</style> 
<title></title> 
</head> 
<body> 
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;"> 
    <tr> 
     <td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td> 
    </tr> 
    <tr> 
     <td> 
      <table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;"> 
       <tr> 
        <td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;"> 
        <h3>Top Stories</h3> 
         <ul> 
          <li>Topic 1</li> 
          <li>Topic 2</li> 
          <li>Topic 3</li> 
         </ul> 
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
        </td> 
        <td valign="baseline" style="padding: 10px; border: 1px solid;"> 
         <h3>Latest News</h3> 
         <p> 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
         </p> 
        </td> 
       </tr> 
      </table>     
     </td> 
    </tr> 
    <tr> 
     <td cellpadding="10px" style="border: 1px solid; cellspacing: 0; width: 100%; height: auto; text-align: center;"> 
      <strong>Copyright &copy 2011 Frost Miller Group </strong> 
     </td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto"> 
      <center> 
      <a href="#">Contact Us</a> 
      &nbsp; 
      <a href="#">Terms of Use</a> 
      &nbsp; 
      <a href="#">Trademarks</a> 
      &nbsp; 
      <a href="#">Privacy Statement</a> 
      &nbsp; 
      <a href="#">Site Feedback</a> 
      </center> 
     </td> 
    </tr> 
    </table> 
</body> 
</html> 

爲了讓它在Outlook中正確顯示,需要進行哪些更改?

回答

36

爲了能夠給你具體的幫助,你的要解釋什麼特定部分專門「搞的一團糟」,或者提供的屏幕截圖。它也有助於知道你遇到問題的Outlook的哪個版本。

無論哪種方式,CampaignMonitor.com's CSS guide經常幫我調試電子郵件客戶端的不一致。

從這個指南,你可以看到幾件事情是不會正常工作,或在Outlook可言,這裏有更重要的一些亮點:

  • 各類更爲複雜選擇的,例如E:first-child,E:hover,E > F(子組合器),E + F(鄰接兄弟組合器),E ~ F(通用兄弟組合器)。這不幸意味着訴諸像內聯樣式的解決方法。
  • 某些字體屬性,例如white-space將無法​​正常工作。
  • background-image屬性不起作用。
  • Box模型屬性有幾個問題,最重要的是height,widthmax-版本要麼不可用,要麼對某些元素有缺陷。
  • 定位和顯示問題(例如display,float s和position全部出局)。

總之:結合CSS和Outlook可能會很痛苦。準備好使用許多醜陋的解決方法。

PS。在你的具體情況下,你的html中有兩個小問題可能會導致你奇怪的行爲。有「align=top」,你可能打算使用vertical-align。另外:cell-padding for td s不存在。

+0

很多年後,微軟Outlook 2013中仍然具有相同的HTML渲染引擎,Outlook 2007中:( – Zarepheth 2015-12-02 15:59:32

+1

@Zarepheth唉,我重新審視我自己的答案,每6〜18個月也一樣,有時候我甚至在此着陸當谷歌搜索 – Jeroen 2015-12-02 19:53:08

+9

一個有用的補充,我偶然發現:要真正測試一個HTML電子郵件如何在Outlook中呈現,您可以在Word中打開HTML文件,兩個MS Office應用程序使用相同的呈現引擎 – Paul 2016-04-11 09:49:01

11

你一定要檢查一下Outlook將支持的CSS和HTML的MSDN。鏈接在這裏:http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx。如果您至少沒有辦公軟件2007,則確實需要升級,因爲2007和以前版本之間存在重大差異。也請嘗試將結果電子郵件保存到文件中,並使用Firefox進行檢查,您將看到Outlook正在更改哪些內容,並可能提出更具體的問題。您也可以使用Word將電子郵件作爲預覽來查看(但您不會獲得有關正在應用什麼樣式的信息)

+2

保存爲HTML,然後檢查它在瀏覽器中是一個偉大的建議(並大量幫助我) - 謝謝 – hobailey 2013-11-20 19:20:36

相關問題