Outlook 2016渲染差距在表中

Question

小的1px间隙显示在包含左侧内容的表格下方。这仅出现在Outlook 2016（Windows）中。

曾尝试添加border-collapse:collapse，margin:0和padding:0但无济于事。其他人经历过这个或处理过它吗？

<table cellspacing="0" cellpadding="0" border="0" width="600">
    <tr>
        <td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
                            <tr>
                                <td style="padding:0px 20px;">
                                    <table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
                                        <tr>
                                            <!-- info -->
                                            <th style="font-weight:normal; text-align:left;">
                                            <table cellspacing="0" cellpadding="0" border="0">
                                                <tr>
                                                    <td width="45"></td>
                                                    <td><table cellspacing="0" cellpadding="0" border="0" align="right">
                                                <tr>
                                                    <td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
                                                </tr>
                                                <tr>
                                                    <td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
                                                </tr>
                                                <tr>
                                                    <td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
                                                </tr>
                                                <tr>
                                                    <td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
                                                </tr>
                                                <tr>
                                                    <td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
                                                </tr>
                                            </table></td>
                                                </tr>
                                            </table>



                                            </th>

                                            <!-- image -->
                                            <th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
                                                <tr>
                                                    <td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
                                                </tr>
                                            </table></th>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
            </td>
    </tr>
</table>

Answer 1

它实际上不是表格问题，而是你的TH。这是outlook 2016的已知错误。（https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/）

要解决这个问题，导致这种情况的任何TH或TD只需要在内联样式中具有“溢出：隐藏”，它应该使该行消失。

 <table cellspacing="0" cellpadding="0" border="0" width="600">
    <tr>
        <td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
                            <tr>
                                <td style="padding:0px 20px;">
                                    <table align="left" cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
                                        <tr>
                                            <!-- info -->
                                            <th style="font-weight:normal; text-align:left; overflow:hidden;">
                                            <table align="left" cellspacing="0" cellpadding="0" border="0">
                                                <tr>
                                                    <td width="45"></td>
                                                    <td><table cellspacing="0" cellpadding="0" border="0" align="right">
                                                <tr>
                                                    <td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
                                                </tr>
                                                <tr>
                                                    <td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
                                                </tr>
                                                <tr>
                                                    <td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
                                                </tr>
                                                <tr>
                                                    <td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
                                                </tr>
                                                <tr>
                                                    <td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
                                                </tr>
                                            </table></td>
                                                </tr>
                                            </table>



                                            </th>

                                            <!-- image -->
                                            <th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
                                                <tr>
                                                    <td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
                                                </tr>
                                            </table></th>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
            </td>
    </tr>
</table>

Answer 2

每个Campaign Monitor，Outlook（版本2007-16）不支持Overflow属性。

资料来源：https://www.campaignmonitor.com/css/positioning-display/overflow/