2013-03-15 15 views
1

我似乎無法將表格單元格中的右下方表格與IE中的底部對齊。 (儘管對齊表格單元格的垂直對齊:「底部」並聲明valign =「底部」。HTML在IE中使用valign嵌套表格不能正常預覽

此外,這是一個電子郵件,所以在頭部的CSS聲明基本上是關閉的 它用表預覽已經堆疊名單垂直對齊頂端

<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="10" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td> 
     <td width="258" bgcolor="#ffffff" valign="top" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif; color:#666666;"><table width="258" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td width="258" height="15" align="left" valign="top" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif; color:#666666;"><span style="font-size:18px; line-height:20px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#e48828;"><br /> 
         Curabitur egestas lorem a nisl aliquet.</span><br /> 
         <br /> 
         Fusce faucibus lorem vel arcu aliquet rutrum. Etiam semper, urna ut scelerisque tristique, dolor sapien porta justo, rutrum tempor ipsum. <br /> 
         <br /> 
         <table border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td width="15" bgcolor="#ffffff">&nbsp;</td> 
           <td width="10" bgcolor="#ffffff"><img src="#" width="10" height="10" alt=" " style="display:block;"/></td> 
           <td width="10" bgcolor="#ffffff">&nbsp;</td> 
           <td width="223" align="left" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif;"><a href="#" target="_blank" style="text-decoration:none; color: #e48828;">Etiam sem elit, venenatis sit.</a></td> 
          </tr> 
         </table></td> 
       </tr> 
      </table></td> 
     <td width="10" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td> 
     <td width="11" bgcolor="#eeefef" style="font-size:1px; line-height:1px;">&nbsp;</td> 
     <td width="271" bgcolor="#ffffff" valign="top" style="font-size:1px; line-height:1px;"><table border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td width="271" bgcolor="#ffffff"><table border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
           <td width="100" height="152" bgcolor="#B2B3B7">&nbsp;</td> 
           <td width="10" bgcolor="#eeefef" style="font-size:1px; line-height:1px;">&nbsp;</td> 
           <td width="10" bgcolor="#FFFFFF" style="font-size:1px; line-height:1px;">&nbsp;</td> 
           <td width="151" align="left" valign="middle" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif; color:#666666;"><br /> 
            <span style="font-size:12px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#005696;"><strong>Phasellus sed ipsum vel augue.</strong><br /> 
            </span> <span style="font-size:10px; line-height:12px;">Aliquam suscipit libero non orci tincidunt nec convallis. <br /> 
            </span></td> 
          </tr> 
         </table></td> 
       </tr> 
       <tr> 
        <td width="271" height="12" bgcolor="#eeefef">&nbsp;</td> 
       </tr> 
       <tr> 
        <td width="271" valign="bottom" bgcolor="#ffffff" style="vertical-align:bottom;"><table border="0" cellspacing="0" cellpadding="0" height="100%"> 
          <tr> 
           <td width="25" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td> 
           <td width="10" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td> 
           <td width="10" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td> 
           <td width="226" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td> 
          </tr> 
          <tr> 
           <td width="25" valign="middle" bgcolor="#ffffff">&nbsp;</td> 
           <td width="10" valign="middle" bgcolor="#ffffff"><img src="#" width="10" height="10" alt=" " style="display:block;"/></td> 
           <td width="10" valign="middle" bgcolor="#ffffff">&nbsp;</td> 
           <td width="226" align="left" valign="middle" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif;"><a href="#" target="_blank" style="text-decoration:none; color: #e48828;">Etiam sem elit, venenatis sit.</a></td> 
          </tr> 
          <tr> 
           <td width="25" valign="middle" bgcolor="#ffffff">&nbsp;</td> 
           <td width="10" valign="middle" bgcolor="#ffffff"><img src="#" width="10" height="10" alt=" " style="display:block;"/></td> 
           <td width="10" valign="middle" bgcolor="#ffffff">&nbsp;</td> 
           <td width="226" align="left" valign="middle" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif;"><a href="#" target="_blank" style="text-decoration:none; color: #e48828;">Etiam sem elit, venenatis sit.</a></td> 
          </tr> 
         </table></td> 
       </tr> 
      </table></td> 
     <td width="10" bgcolor="#eeefef" style="font-size:1px; line-height:1px;">&nbsp;</td> 
    </tr> 
    <tr> 
     <td width="10" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px; border-bottom:1px solid #b2ccdf;">&nbsp;</td> 
     <td width="258" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px; border-bottom:1px solid #b2ccdf;">&nbsp;</td> 
     <td width="10" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px; border-bottom:1px solid #b2ccdf;">&nbsp;</td> 
     <td width="11" height="15" bgcolor="#eeefef" style="font-size:1px; line-height:1px; border-bottom:1px solid #eeefef;">&nbsp;</td> 
     <td width="271" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px; border-bottom:1px solid #b2ccdf;">&nbsp;</td> 
     <td width="10" height="15" bgcolor="#eeefef" style="font-size:1px; line-height:1px; border-bottom:1px solid #eeefef;">&nbsp;</td> 
    </tr> 
</table> 

screenshot of ie problem

+0

那麼它爲什麼要在工作IE瀏覽器? – Flauwekeul 2013-03-15 13:34:43

+1

由於IE瀏覽器將用於在Outlook客戶端以及Hotmail,Gmail等Web客戶端中呈現 – Ateszki 2013-03-15 13:36:10

+0

如果您從此行的表格中移除1005高度,會發生什麼情況

。我現在沒有IE來測試。 – Ateszki2013-03-15 13:39:54

回答

0

我不會說這是一個錯誤

表在這條線:。

<td width="271" bgcolor="#ffffff" valign="top" style="font-size:1px; line-height:1px;"><table border="1" cellspacing="0" cellpadding="0"> 

不需要更多的垂直空間進行渲染,因此它比左側更「封閉」。您的valign'ed表正確對齊,但它垂直對齊的td只有足夠大以容納它,所以沒有valign的實際效果。

我會只用一個表作爲需要。如果它是一個電子郵件模板解決這個問題,有rowspans和colspans,insted的無數嵌套的表格,你現在有...