2013-10-21 88 views
0

我有一個非常簡單的HTML電子郵件模板 - 僅用於測試 - 它有5列,並且有一個單詞,問題是在Outlook 2013中,第一列始終是垂直錯誤對齊的。這是HTML。Outlook 2013中的HTML電子郵件未對齊?

<!DOCTYPE html> 
<html><body>  
    <table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"> 
       <table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"> 
          <table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"> 
             Row 
            </td> 
            <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"> 
             Row 
            </td> 
            <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"> 
             Row 
            </td> 
            <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"> 
             Row 
            </td> 
            <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"> 
             Row 
            </td> 
           </tr></table></td> 
        </tr></table></td> 
     </tr></tbody></table></body></html> 

Outlook 2013中的結果是:

Outlook 2013

這是從Outlook

<!DOCTYPE html><br /> 
<html><body> <br /> 
    <table width="95%" cellpadding="0" cellspacing="0" border="0" id="wrapper_table" style="border-collapse: collapse; border-spacing: 0; vertical-align: top; height: 100%; width: 100%;"><tbody><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br /> 
       <table width="600" cellpadding="0" cellspacing="0" border="0" id="content_1" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top;"><br /> 
          <table width="100%" cellpadding="0" cellspacing="0" border="0" id="test" style="border-collapse: collapse; border-spacing: 0; vertical-align: top;"><tr><td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br /> 
             Row<br /> 
            </td><br /> 
            <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br /> 
             Row<br /> 
            </td><br /> 
            <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br /> 
             Row<br /> 
            </td><br /> 
            <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br /> 
             Row<br /> 
            </td><br /> 
            <td style="font-weight: normal; text-align: left; vertical-align: top; border: 1px solid black;"><br /> 
             Row<br /> 
            </td><br /> 
           </tr></table></td><br /> 
        </tr></table></td><br /> 
     </tr></tbody></table></body></html><br /> 

的問題是關係到所有的前景增添額外的BR標籤輸出的代碼,但我能做些什麼呢?

謝謝!

回答

1

據我所知,電子郵件中不支持外部樣式,樣式必須內嵌應用於每個標籤。您是否曾嘗試在每個嵌套tds上添加valign="top"

<td valign="top"> 
    Row 
</td> 

您也可以嘗試關閉了該嵌套在您的標籤內的任何空白,例如:

<td valign="top">Row</td> 
+0

正如我所說的,樣式都是內聯發送電子郵件之前,我有一個PHP函數做到這一點,我不使用外部樣式。我嘗試過valign,但不幸運。 –

+0

您是否測試了沒有使用函數的電子郵件/通過將其構建爲預期輸出?我不認爲你應該在這裏包含這個功能。 –

+0

是的,我沒有嘗試過,我也檢查了Outlook中的電子郵件的來源,它包含所有的樣式等作爲我寫的代碼,但是增加了很多BR標籤,但它們對於每個單元格都是相同的所以如果這是問題,所有的都應該是錯位的。 –

相關問題