html - Outlook 2010 中奇怪的表格格式

Question

找了又找，没找到答案。

我有一个奇怪的问题，仅在 Outlook 2010 中显示。

正如您在图中看到的，我有一个大表格单元格(在图像后面)，而在另一侧，在右侧(不在图像中)有 9 个单元格的表格，与我的问题中使用的结构相同可以查到Here

现在，我不明白为什么 Outlook 2010 不能正确呈现我的代码，为什么我在图像的两边都有那些黑线(也许是间距？)。

这是我当前的代码，我可能忽略了一些东西...... :(

<td rowspan="9"><img alt="Image" src="http://imagelink.com" width="177" height="177" style="margin:15px 0 10px 20px;border-style:solid;border-color:#fff;border-width:7px;-webkit-box-shadow:0 3px 7px 1px #cecece;-moz-box-shadow:0 3px 7px 1px #cecece;box-shadow:0 3px 7px 1px #cecece"></td>

Answer 1

首先，这里没有足够的信息来重现这个问题。我从上面代码片段提供的链接中复制了您的确切场景。

<table>
<tr>
    <td rowspan="9"><img alt="Image" src="http://imagelink.com" width="177" height="177" style="margin:15px 0 10px 20px;border-style:solid;border-color:#fff;border-width:7px;-webkit-box-shadow:0 3px 7px 1px #cecece;-moz-box-shadow:0 3px 7px 1px #cecece;box-shadow:0 3px 7px 1px #cecece">
    </td>
    <td>
        Cell 1
    </td>
</tr>
<tr>
    <td>
        Cell 2
    </td>
</tr>
<tr>
    <td>
        Cell 3
    </td>
</tr>
<tr>
    <td>
        Cell 4
    </td>
</tr>
<tr>
    <td>
        Cell 5
    </td>
</tr>
<tr>
    <td>
        Cell 6
    </td>
</tr>
<tr>
    <td>
        Cell 7
    </td>
</tr>
<tr>
    <td>
        Cell 8
    </td>
</tr>
<tr>
    <td>
        Cell 9
    </td>
</tr>
</table>​

在 Windows 7 上的 Outlook 2010 中测试它。没有问题。请包括确切的标记。标题和正文内容会影响电子邮件。

第二，您使用的是什么机器，Outlook 在 XP 中的显示方式与 7 不同。

第三，您不应该为电子邮件使用速记 CSS。请参阅:http://sixrevisions.com/web_design/creating-html-emails/

第四， 填充和边距仅适用于表格和 td 标签，前提是它们要跨电子邮件客户端兼容:http://www.campaignmonitor.com/css/ .然而，Hotmail 不支持边距。如果不按照链接将图像嵌套到另一个表格中，您将在第一行的内部内容中遇到填充/边距问题。

第五，您需要关闭所有标签。图像没有结束/。

我预感您可能必须在此处使用嵌套表格，因为这可能是电子邮件客户端显示问题。这里有一个部分:Campaignmonitor 有一个优秀的设计指南部分

试试这个:

<table>
<tr>
    <td>
        <table>
            <tr>                   
                <td style="padding-top: 15px; padding-right:0px; padding-bottom: 10px; padding-left:20px;" width="177px" height="177px">
                    <img alt="Image" src="http://imagelink.com" width="177px" height="177px" style="border-style:solid; border-color:#ffffff; border-width:7px; -webkit-box-shadow:0 3px 7px 1px #cecece; -moz-box-shadow:0 3px 7px 1px #cecece; box-shadow:0 3px 7px 1px #cecece" />
                </td>
            </tr>
        </table>
    </td>            
    <td>
        <table>
            <tr>
                <td>
                    Cell 1
                </td>
            </tr>
            <tr>
                <td>
                    Cell 2
                </td>
            </tr>
            <tr>
                <td>
                    Cell 3
                </td>
            </tr>
            <tr>
                <td>
                    Cell 4
                </td>
            </tr>
            <tr>
                <td>
                    Cell 5
                </td>
            </tr>
            <tr>
                <td>
                    Cell 6
                </td>
            </tr>
            <tr>
                <td>
                    Cell 7
                </td>
            </tr>
            <tr>
                <td>
                    Cell 8
                </td>
            </tr>
            <tr>
                <td>
                    Cell 9
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>​

希望对您有所帮助!