Outlook中的HTML電子郵件背景破壞布局-使用VML方法

Question

當前使用http://backgrounds.cm方法生成背景電子郵件。 當不使用代碼時，在大多數測試中，電子郵件看起來都是正確的。 添加背景圖像時，Outlook 2013將顯示它，但是所有表格格式都會擴展到100％。 不知道我是否實施不正確。

當前，將背景應用於包含多個單元格（而不是整個單元格）的最頂層表格。

我在這里粘貼了代碼： http : //pastebin.com/dX8zEZDV

Answer 1

我做了幾件事來解決它：

• 已將您的文檔類型從strict更改為transitional 。
• 刪除重復的元標記。
• 關閉所有未關閉的標簽（ img和br標簽）。
• 刪除了外面的兩個包含表（ #container_table和#container_wrapper ）。
• 在#container_table ，刪除了min-width ，添加了margin:0 auto和align="center"以便表居中。
• 在VML代碼部分中，將mso-width-percent:1000替換為width:850px 。
• 更新了關閉VML標簽以更正嵌套順序（過早關閉）。

可選的：

• 在“ VML代碼”部分中，更改顏色以更好地匹配您的背景（＃292929）。

我發現VML背景圖片和內聯后備廣告不起作用的唯一實例是當我在Android上使用Gmail應用查看Outlook電子郵件時。 但是，當我在同一應用程序中查看我的name@gmail.com電子郵件時，就可以了。 因此，如果沒有加載背景圖片，則會顯示bgcolor，以便您的用戶仍然可以看到您的白色文本。

注意：請始終記住驗證您的代碼。 即使存在無法糾正的錯誤（例如td的background屬性無法驗證），您也可以驗證所有標簽（減去任何VML代碼）是否正確嵌套/關閉，以及發現任何意外情況您可能已從Photoshop或Word復制到代碼中的特殊字符。

jsfiddle上的更新源： 鏈接

Answer 2

如果表格格式擴展到100％ ，那是因為您將“表格單元格寬度”設置設置為“完整電子郵件寬度”。 最好在固定的寬度和高度表單元格上使用VML背景圖像。

background.cm的理想設置是“單個表格單元格”並設置width和height 。 否則，結果可能看起來與非Outlook客戶端不同（有時，如果事先與利益相關者達成協議，還是可以的）。