outLook呈现不必要的空间 [英] OutLook renders unnecessary space

问题描述

我的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电子邮件客户端之外的任何地方都很好。在外观上，线断裂和不必要的空间来了。
outlook的结果是这样

This works fine everywhere except OutLook 2010 email client. In out look the line breakes and unnecessary space comes. Result in outlook is like this

预期输出如下：

任何一个指出发生了什么问题？

Expected output is like this Can any one point out whats going wrong?

推荐答案

这看起来像Outlook分页问题。它是Outlook用于呈现html的Microsoft Word引擎的一个怪癖。它增加了一个看不见的断裂线，如果你有任何太高（像一个图像），它会下降。不幸的是它是不可避免的，所以你只需要围绕它设计。

This looks like the "Outlook Page Break Issue". It is one of the quirks of the Microsoft Word engine that Outlook uses to render html. It adds an invisible break line in there, and if you have anything too tall (like an image) it will bump down. Unfortunately it is unavoidable, so you just have to design around it.

对你来说，好消息是你的部分相当小。尝试在您的设计中的麻烦区域的某处添加或删除30-60像素。然后，断点将落在图像的上方或下方，防止其被下推。

Good news for you is that your sections are rather small. Try adding or removing 30-60 pixels somewhere in your design above the trouble area. The break point would then fall above or below your image, preventing it from being pushed down.

这篇关于outLook呈现不必要的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！