html – Outlook 2013呈现问题：嵌套表截断相邻文本

2019年8月4日 206次阅读

在开发html电子邮件简报时,我经常使用类似于以下内容的结构：

<table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc">
<tr>
  <td>
        <table border="0" align="left">
        <tbody>
        <tr>
              <td bgcolor="#FFCCCC">text in the table cell.<br>and another line of text.<br>and a third line.</td>
        </tr>
        </tbody>
        </table>
Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</td>
</tr>

在浏览器中查看时,结果如下所示：

但是当由Outlook 2013呈现时,主(黄色)表中最左侧的文本被截断：

对此有解释或解决方法吗？

(我通常会在内部(粉红色)表格中放置一个图像,而不是文本.这允许主要(黄色)文本似乎在图像周围流动的设计.无论是图像还是文本,结果都是相同的.主(黄色)表中的文本被截断,如此处所示.)

最佳答案 尝试在标题表上设置左对齐,在我的代码中,这将适用于所有客户端.

为所有客户测试石蕊：

<table cellspacing="0" cellpadding="0" width="560" align="left" border="0">
<tbody>
    <tr>
        <td align="left">   
            <table cellspacing="0" cellpadding="0" align="left">
                <tbody>
                    <tr>
                        <!-- spacer for the top of the image -->
                        <td align="left" colspan="2">
                            <img src="spacer.gif" height="5" alt="spacer" style="display:block; margin:0px; border:0px;" align="left" />
                        </td>
                    </tr>
                    <tr>
                        <!-- the image or text -->
                        <td align="left">
                            <img src="imagesrc" alt="imagealt" style="display:block; margin:0px; border:0px;" />
                        </td>

                        <!-- spacer for the right of the image -->
                        <td align="left">
                            <img src="spacer.gif" width="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
                        </td>
                    </tr>
                    <tr>

                        <!-- spacer for the bottom of the image -->
                        <td colspan="2" align="left">
                            <img src="spacer.gif" height="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- here your tekst -->
            <div style="margin:0px; padding:0px; mso-line-height-rule: exactly; color:#000000; font-family:Verdana, Arial; font-size:12px; line-height:20px; display:block;">Hello. This is sample text. This is another sentence. Hello. This is sample text.</div>
        </td>
    </tr>
</tbody>
</table>
点赞