2014-01-14 40 views
0

我的HTML是這樣的OutLook使不必要的空間

<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中是這樣 enter image description here

預期成果是這樣 enter image description here 可以在任何一個點了什麼問題呢?

回答

1

這看起來像「Outlook分頁問題」。這是Outlook用來呈現html的Microsoft Word引擎的怪癖之一。它在那裏增加了一個看不見的斷線,如果你有太高的東西(如圖像),它會下降。不幸的是它是不可避免的,所以你只需要圍繞它進行設計。

對你來說好消息是你的部分比較小。嘗試在故障區域上方的設計中的某處添加或移除30-60像素。然後斷點會落在圖像的上方或下方,防止它被推下。