表格間隔在IE上的Microsoft Outlook中呈現不同

我目前正在嘗試使用HTML電子郵件的圖像和表格創建一個帶圓角的框。除了IE上的Microsoft Outlook外，它在所有客戶端和瀏覽器中都很棒（已測試8 & 9）。以下是代碼片段：表格間隔在IE上的Microsoft Outlook中呈現不同

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=4" /> 
<title></title> 
</head> 
<body style="margin:0px; padding:0px;"> 
<style type="text/css"> 
.ReadMsgBody {width: 100%;} 
.ExternalClass {width: 100%;} 
</style> 

<table width="174" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="174" align="left" valign="top" style="line-height:0px;"> 
     <img src="lmir_tmpl_box_top.png" width="174" height="13" align="left" border="0" style="display:block;" alt="" /> 
     </td> 
    </tr> 
    <tr> 
     <td width="174" align="left" valign="top"> 

      <table width="174" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td width="8" height="100%" align="left" valign="top" bgcolor="#dcddde"></td> 
        <td width="158" align="left" valign="top" bgcolor="#dcddde"> 

         <table width="158" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td width="158" align="left" valign="top" style="line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#414042; font-size:11px; font-weight:bold;"> 
     Now you can access on your mobile device! 
           </td> 
          </tr> 
          <tr> 
           <td width="158" height="8" align="left" valign="top"></td> 
          </tr> 
          <tr> 
           <td width="158" height="1" align="left" valign="top" bgcolor="#CCCCCC"></td> 
          </tr> 
          <tr> 
           <td width="158" height="8" align="left" valign="top"></td> 
          </tr> 
          <tr> 
           <td width="158" align="left" valign="top" style="line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#414042; font-size:11px; font-weight:bold;"> 
           <img src="arrow.png" width="10" height="12" align="left" alt="" border="0" style="display:block;" alt="" /> 
           &nbsp;&nbsp;Visit <a href="#" style="color:#00aef0;" target="_blank"><span>Link</span></a> 
           </td> 
          </tr> 
         </table> 

        </td> 
        <td width="8" height="100%" align="left" valign="top" bgcolor="#dcddde"></td> 
       </tr> 
      </table> 

     </td> 
    </tr> 
    <tr> 
     <td width="174" align="left" valign="top" style="line-height:0px;"> 
     <img src="lmir_tmpl_box_bot.png" width="174" height="13" align="left" border="0" style="display:block;" alt="" /> 
     </td> 
    </tr> 
</table> 

</body> 
</html>

這裏是一個什麼盒子看起來像在Outlook中的截圖：

enter image description here

有誰知道爲什麼中間行被推向左側？謝謝，如果您有任何問題或意見，請告訴我。

來源

2013-01-10 myrmidon16

打開所有的表格邊框。你將能夠判斷哪個單元行爲不當。 –

我已經想通了。顯然我必須從曲面頂部和底部圖像中刪除align =「left」。謝謝。

來源

2013-01-11 17:21:28 myrmidon16

表格間隔在IE上的Microsoft Outlook中呈現不同

回答

相關問題