outlook 2013在表之间添加空间

时间:2015-02-23 19:07:59

标签: html email outlook html-email email-integration

经过多个小时的挖掘和测试后,我找不到如何解决这个bug。

您是否可以在图像上看到Outlook 2013上显示的额外空间,以及2007/2010年展望中的轻微空间。

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

exemple http://a-part.fr/mailing/test/preview-image-outlook-2013.png

jsfiddle:http://jsfiddle.net/fmj5osk8/

        <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>

2 个答案:

答案 0 :(得分:1)

在你不需要的细胞上摆脱所有这些额外的废话,特别是那些包含图像的细胞: style =&#34; vertical-align:top; overflow:hidden; line-height:0; MSO的行高规则:恰好;&#34;

为我解决了这个问题:)

答案 1 :(得分:0)

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

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