2012-02-16 58 views
1

我有一個在大多數電子郵件客戶端正常工作(或至少是可以接受的),但完全Outlook 2007和Outlook 2010年突破HTML電子郵件表在Outlook 2007年破2010及

我知道,電子郵件模板這些版本的Outlook使用Word渲染引擎而不是IE。

我聽說過Outlook分頁符錯誤,但這似乎隻影響垂直間距。我的問題是水平間距。

代碼:http://jsbin.com/alagih/edit#html,liveb

所有主要的電子郵件客戶端測試結果:http://artletic.createsend.com/screens/y/F2B9C33F1297A73F

Outlook 2007的截圖: Outlook 2007 screenshot

+0

開始調試:刪除所有amazonaws託管的圖像。然後開始刪除樣式定義。最終你會發現製作Word barf的那個。 – 2012-02-16 03:05:24

+0

謝謝@ marc-b。我嘗試了一些變化,但希望避免測試50個不同的時間。我正在使用CampaignMonitor的測試(使用Litmus)。每次測試5美元對少數人來說是好的,但是在調試時,這加起來很快! – 2012-02-16 16:43:46

+1

不應該有任何真正的原因,你不能用原始HTML硬編碼快速測試腳本,並將其工作到您自己的郵箱,而不涉及第三方。如果您無法使用單獨的腳本複製它,那麼就開始對供應商大喊大叫。 – 2012-02-16 20:03:33

回答

1

你從來沒有設置包含表的寬度你的身體信息。

它設置爲<table border="0" width="">

至於你的「franco.jpg」的形象,看起來像Outlook正在忽略的img標籤內嵌保證金。嘗試爲您的內容創建一個雙列表,然後將圖片封裝在div中,並給它一個右邊距或將文本內容包裹在div中並給它一個左邊距。 Outlook出於某種原因不喜歡填充。另外,由於Outlook 2007和2010可能使用Word作爲渲染引擎,因此它將忽略某些樣式,例如background-image(背景位置),但它會接受`bgcolor'和'background-color'。

測試Outlook 2007/2010最快捷的方法是在MS Word中打開它。它應該接近那些Outlook版本中顯示的內容。不知道是什麼原因導致=E2=80=9D

如果您確實必須使用背景圖片,請嘗試this hack

+0

[有一個新的'黑客'包括背景圖像](http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email)在您的原始「本hack」鏈接中引用了相同的網站。 – 2013-01-03 20:28:02

5

我發現專門針對Outlook 2007中的HTML郵件,您應該在標記和內聯CSS中設置寬度參數。

所以例如<td width="150px" style="width: 150px;">

+0

也幫助我與Outlook 2010。好一個 – 2016-06-18 12:51:21

2

嘗試增加的寬度到包含圖像的任何TD。

例子:

<td width="150"> 
    <img src="/img/image.jpg" width="150" height="150"> 
</td> 

還要確保這些圖像設置爲display: block

相關問題