展望 2013 在 table 之间添加 space

Question

经过几个小时的挖掘和测试，我找不到解决这个错误的方法。

你有没有看到，在图像上，额外的 space 出现在 outlook 2013 上，并且在 outlook 2007/2010 上有少量出现。

邮件来源：http://a-part.fr/mailing/test/test.html

        <table class="bodyTable" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff"  style="background-color:#ffffff; color:#000000;font-family:'Times New Roman', Times, serif;font-size: 14px;border-collapse:collapse;margin:auto;border-spacing: 0;" >
        <tr>
            <td  width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">
                <table class="header"  width="600"  cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;" >
                    <tr>
                        <td height="158" style="vertical-align: top;overflow:hidden;height:158px;line-height: 0; mso-line-height-rule:exactly;" >
                            <img style="display: block" src="http://a-part.fr/mailing/test/img/header.jpg" alt="test" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td  width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">                
                <table  width="600" height="69" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;">
                    <tr align="center" >
                        <td height="69" width="119" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
                            <img style="display: block" src="http://a-part.fr/mailing/test/img/l_titre.jpg" />
                        </td>
                        <td height="69"  style="vertical-align: top;overflow:hidden;" >
                            <h1 style="font-size: 20px;padding:0;margin:0;margin-top:0;margin-bottom: 5px;color:#E9E00B;" >
                                Dolor si amet
                            </h1>
                            <span style="font-style: italic;padding:0;margin:0;">
                                dolor si amet
                            </span>
                        </td>
                        <td height="69"  width="43"  style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
                            <img style="display: block" src="http://a-part.fr/mailing/test/img/r_titre.jpg" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td  width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">                
                <table  width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;">
                    <tr align="center" >
                        <td  width="55" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
                            <img style="display: block" src="http://a-part.fr/mailing/test/img/l_h_text.jpg" />
                        </td>

                        <td align="left" style="vertical-align: top;overflow:hidden;" >

                            <p>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend mauris eget bibendum condimentum. Integer dapibus eu magna ac gravida. Donec volutpat auctor nisi in mattis. </p>
                            <h2 style="font-size: 16px;margin-bottom: 5px;">Lorem ipsum</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend mauris eget bibendum condimentum. Integer dapibus eu magna ac gravida. Donec volutpat auctor nisi in mattis. </p>

                            <h2 style="font-size: 16px;margin-bottom: 5px;">Lorem ipsum</h2>
                            <p>
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend mauris eget bibendum condimentum. Integer dapibus eu magna ac gravida. Donec volutpat auctor nisi in mattis.  </p>
                            <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend mauris eget bibendum condimentum. Integer dapibus eu magna ac gravida. Donec volutpat auctor nisi in mattis.   </p>


                            <div style="margin:0px;padding:10px;border:3px solid yellow;border-radius:5px;text-align: center;">
                                <h3  style="font-size: 14px;margin-bottom: 5px;margin-top:5px;">Lorem ipsum:</h3>
                                Lorem ipsum dolor <br />
                                Lorem dolor si amet bibendum<br />
                            </div>
                        </td>

                        <td  width="55"  style="vertical-align: top;overflow:hidden;" >

                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td  width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">  
                <table  width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;">
                    <tr align="center" >
                        <td height="62"  width="55" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
                            <img style="display: block" src="http://a-part.fr/mailing/test/img/l_b_text.jpg" />
                        </td>

                        <td height="62" style="vertical-align: middle;overflow:hidden;" >
                            <h2  style="font-size: 16px;padding:0;margin:0;margin-bottom: 5px;">Dolor si amet</h2>
                        </td>

                        <td height="62"  width="55"  style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td  width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">                

                <table  width="600" height="110" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;">
                    <tr align="center" >
                        <td  height="110" width="195" style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
                            <img style="display: block" src="http://a-part.fr/mailing/test/img/l_footer.jpg" />
                        </td>

                        <td height="110" style="vertical-align: top;overflow:hidden;" >
                            <p style="font-size: 14px;margin:0px;">
                                Dolor si amet,<br />
                                <b style="line-height: 25px; mso-line-height-rule:exactly;">L’équipe de test</b><br />
                                <span>dolor si amet</span><br />
                                <span style="line-height: 25px; mso-line-height-rule:exactly;">07 25 54 54 54 </span><br />
                                <a href="http://www.test.fr" style="color:#000000;text-decoration:none;">www.test.fr</a><br />
                            </p>
                        </td>

                        <td height="110" width="206"  style="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;" >
                            <img style="display: block" src="http://a-part.fr/mailing/test/img/r_footer.jpg" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td  width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">                

                <table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:auto;border-spacing: 0;" >
                    <tr>
                        <td height="99" style="vertical-align: top;overflow:hidden;height:99px;line-height: 0; mso-line-height-rule:exactly;" >
                            <img style="display: block" src="http://a-part.fr/mailing/test/img/b.jpg" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td  width="600" valign="top" style="line-height: 16px; mso-line-height-rule:exactly;vertical-align: top;">                

                <!-- désinscription mailjet -->
                <p style="text-align: center;color:#000000;text-decoration:none;">
                    <a href="[[UNSUB_LINK_FR]]">Se désabonner</a>
                </p>
                <!-- fin désinscription mailjet -->

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

Answer 1

去掉你不需要的单元格上的所有这些额外的废话，尤其是那些包含图像的单元格：样式="vertical-align: top;overflow:hidden;line-height: 0; mso-line-height-rule:exactly;"

帮我修好了:)

Answer 2

我发现在仅包含图像的 TD 中添加 style="font-size:0%;" 可以解决此问题。

所以聊聊：https://litmus.com/community/code/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom

展望 2013 在 table 之间添加 space

outlook 2013 add space between table

html

outlook

html-email

email