OutLook呈现不必要的空间

Question

我的HTML就像这样

<tr>
        <td align="left" valign="top">
           <table width="590" border="0" cellspacing="0" cellpadding="0">
              <tbody><tr>
                 <td width="296" align="left" valign="top">
                    <table width="285" border="0" align="left" cellpadding="0" cellspacing="0">
                       <tbody><tr>
                           <td height="38" colspan="2" align="left" valign="top">

                               <h2 style="font-size:18px;color:#535353;padding-top:0;font-family:Arial, Helvetica, sans-serif;"><a href="#" style="text-decoration:none;color:#535353;" target="_blank" class="c_nobdr t_prs">Two Column with seperation</a></h2>

                           </td>
                       </tr>
                                                  <tr>
                              <td colspan="2" align="left" valign="top">
                                  <p style="font-size:14px;color:#888888;line-height:22px;font-family:Arial, Helvetica, sans-serif;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique nulla lectus, eu porttitor mi porttitor sed. Sed cursus leo eget gravida condimentum. Duis dapibus tempus tortor, vel pellentesque erat Lorem </p>
                              </td>

                       </tr>
                       <tr>
                          <td width="144" height="60" align="center" valign="middle" style="line-height:60px !important;">
                             <strong style="font-size:25px;color:#ed1d21;font-family:Arial, Helvetica, sans-serif;">55.25 KR</strong>
                          </td>
                          <td width="141" align="right" height="50" valign="middle">
                             <a href="#" target="_blank">
                             <img src="https://bay174.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=VHTXyKjxqs8yDk0PdNghJS79MbTBdqSBvOPi1wujgZ8%3d0&amp;url=http%3a%2f%2fi5.cmail3.com%2fei%2fr%2f6E%2f4B2%2f850%2f213212%2fcsimport%2fbestil-her_14.png" alt="Bestil Her" width="108" height="34" style="border-width:0;">
                             </a>
                          </td>
                       </tr>
                    </tbody></table>
                 </td>
                 <td width="294" align="right" valign="top">
                    <table width="285" border="0" align="right" cellpadding="0" cellspacing="0">
                       <tbody><tr>
                           <td height="38" colspan="2" align="left" valign="top">

                               <h2 style="font-size:18px;color:#535353;padding-top:0;font-family:Arial, Helvetica, sans-serif;"><a href="#" style="text-decoration:none;color:#535353;" target="_blank">Two Column with seperation</a></h2>

                           </td>
                       </tr>
                       <tr>
                          <td colspan="2" align="left" valign="top">
                             <a href="#" target="_blank">
                             <img src="https://bay174.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=VHTXyKjxqs8yDk0PdNghJS79MbTBdqSBvOPi1wujgZ8%3d0&amp;url=http%3a%2f%2fi4.cmail3.com%2fei%2fr%2f6E%2f4B2%2f850%2f213212%2fcsimport%2fthum01_13.gif" alt="Thum01" width="285" height="180" style="border-width:0;">
                             </a>
                       </td></tr>
                       <tr>
                          <td colspan="2" align="left" valign="top">
                             <p style="font-size:14px;color:#888888;line-height:22px;font-family:Arial, Helvetica, sans-serif;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"></p>
                          </td>
                       </tr>
                    </tbody></table>
                 </td>
              </tr>
           </tbody></table>
        </td>
     </tr>

除OutLook 2010电子邮件客户端外，其他任何地方都可以。在外面看线断裂和不必要的空间来。 前景的结果是这样的

预期输出是这样的 任何人都可以指出什么是错的吗？

Answer 1

这看起来像“Outlook分页问题”。这是Outlook用于呈现html的Microsoft Word引擎的怪癖之一。它会在那里添加一条不可见的断裂线，如果你有任何太高的东西（如图像），它会向下撞击。不幸的是，这是不可避免的，所以你只需围绕它进行设计。

对你而言，好消息是你的部分相当小。尝试在故障区域上方的设计中的某处添加或删除30-60像素。然后断点将落在图像之上或之下，从而防止其被压下。