HTML5郵件在Outlook 2007/2010/2013中顯示不佳

Question

在左側和右側，我有一些間距。 在所有郵件客戶端中，除了Outlook 2007/2010/2013之外，它都顯示了該間距。

圖片1

這就是我要的。 左側有一些文本，右側有圖像。 紅線表示文本/圖像與虛線邊框之間的間距。

圖片2

在Outlook 2007/2010/2013中，虛線邊框的左邊和右邊沒有空格。 在文本和圖像之間，我使用“ outlookseparator”。 當我不使用“ outlookseparator”時，它在左側提供了間距（在文本之前有間距），但是在文本下方顯示了圖像。

如何在Outlook 2007/2010/2013中獲得圖像1的結果？

Answer 1

Outlook無法讀取HTML5元素。 沒有任何代碼可供查看，我假設您正在使用div，而outlookseparator是一個類。

這可能會有些令人震驚（有很多文字），但這是您要在Outlook中獲得所需內容所要做的。 您可以修改它，但要確保所有內容（寬度）加在一起。

<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
    <tr valign="top">
        <td align="left" valign="top" style="border:1px dashed #e6e6e6">
            <table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
                <tr valign="top">
                    <td width="10">

                    </td>
                    <td align="left" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" width="300" style="border-collapse:collapse; padding:0; margin:0px;">
                            <tr valign="top">
                                <td align="left" valign="top" style="font-size:14px; line-height:16px;padding-top:10px;padding-bottom:10px;">
                                    <font face="Arial,'Helvetica Neue',Helvetica,sans-serif" color="#444444" size="2" style="color:#444444; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; font-size:14px; line-height:16px; -webkit-text-size-adjust:none; font-weight:normal">
                                        TEXT!
                                    </font>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td align="right" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" width="300" style="border-collapse:collapse; padding:0; margin:0px;">
                            <tr valign="top">
                                <td align="left" valign="top" style="padding-top:10px;padding-bottom:10px;">
                                    <img src="http://somewhere.com/images/something.png" width="300" height="100" alt="" style="display:block;" border="0" />
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td width="10">

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

順便說一句，在電子郵件中使用類是不好的做法。 在GMail中，它看起來很糟糕，因為GMail不讀取樣式標簽或外部CSS。

Answer 2

Outlook使用Word作為電子郵件編輯器。 您可以在MSDN的以下文章中了解有關此內容的更多信息：

• Outlook 2007中的Word 2007 HTML和CSS呈現功能（第1部分，共2部分）
• Outlook 2007中的Word 2007 HTML和CSS呈現功能（第2部分，共2部分）