Outlook 2007/2010/2013電子郵件顯示問題

Question

我遇到的問題如下圖所示。在Outlook 2007,2003和2013中，左列中的圖標未正確對齊。我嘗試過使用行高/字體大小來解決問題。

我已繪製表格單元格/行邊框來說明我正在使用的結構。每個圖標都有padding-top:5px可以與右欄中的文字正確對齊。

這是一個行的代碼：

<tr> 
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;padding-top: 5px;margin: 0;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;"></td> 

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
    data held to ransom in the last 12 months*.</td> 
</tr> 

任何想法？

Answer 1

如果padding-top不適用於td，請嘗試將css應用於img本身。編輯你的img的css（參考下面的代碼）。刪除td的填充頂部。

<tr> 
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;margin-top: 5px;"></td> 

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
data held to ransom in the last 12 months*.</td> 
</tr> 

如果給人一種上邊距爲IMG仍然不起作用，甚至嘗試用邊框頂部交易它的填充或（與5px的邊框寬度）

Answer 2

爲什麼不使用valign="middle"在包含圖像的表格單元格？

<tr> 
    <td class="icon" width="59" valign="middle"> 
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;"> 
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*. 
    </td> 
</tr> 

更新：下面是如果您有更多文本的示例。您的圖片將保持頂部對齊。

<table width="325" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
    <td class="icon" valign="top" width="59" valign="middle" style="padding-top:5px;"> 
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    <td valign="top" class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;"> 
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br> 
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br> 
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*. 
    </td> 
</tr> 
</table>