将div放入td单元格的css布局问题

Question

我正在重新布局一个旧的asp页面，以便用一些新的要求对其进行更新。我试图把一些div标签放在一个td单元格中，因为td单元格内的一个表格不会达到我以前的样子。所以，基本上我有一个div应该对齐左上角，另一个div也应该对齐顶部填充空间的其余部分，一个div下面有一行文本，一个div下面包含图像应该水平和垂直居中，最后一个div低于该图像应低于图像并对齐到单元格的底部。我已经（见下面的代码）奠定了它，以便它在IE中工作，但它看起来像在铬和Firefox的废话，我哪里错了？

<td style="position:relative;"> 
         <div style="position:absolute; width:10%; top:0; left:0;z-index:1;font-family:Verdana;font-size:small;color:#22476C;"> 
          <%=(sCount+1) + ((pg-1)* PageSize)%>.) 
         </div> 

         <div style="position:absolute; width:100%; top:0; left:0%;z-index:2; text-align:center;"> 
          <a style="font-family:Verdana;font-size:small;font-weight:bold;color:#22476C;" href="results.asp?pubid=<%=PubID & "&date=" & Server.URLEncode(w_RunDate) & "&ttype=" & tType%>" target="_top"> 
           <%=rs("Publication")%> 
          </a> 
         </div> 

         <div style="margin-top:20px;text-align:center;font-family:Verdana;font-size:x-small;color:#22476C;"> 
          <%=pubRunDate%> 
         </div> 

         <div style="text-align:center; vertical-align:middle;display:block;padding-bottom:120px;"> 
          <img src="<%=LastThumb%>" style="border:solid 1px black;" alt="" /> 
         </div> 

         <div style="position:absolute; left:0; bottom:0;" > 
          <table border="1" cellpadding="0" cellspacing="0" class="verdanaSmall" style="width:100%;background-color:#D3DAE1; vertical-align:bottom;"> 
           <tr> 
            <td style="width:32%;text-align:center;"> 
             <%=Replace(rs("Section"),"0","") & Fix(rs("Page")) & rs("Suffix")%> 
            </td> 
            <td style="width:68%;text-align:right; padding-right:10px;"> 
             <%=InvoiceString & " " & SaveString%> 
            </td> 
           </tr> 
           <tr> 
            <td style="text-align:right;"> 
             <%=w_Agency%>:&nbsp; 
            </td> 
            <td> 
             <%=rs("AgencyName")%> 
            </td> 
           </tr> 
           <tr> 
            <%=RightCellA%> 
           </tr> 
           <tr> 
            <td style="text-align:right;"> 
             <%=w_Advertiser%>:&nbsp; 
            </td> 
            <td> 
             <%=rs("AdvertiserName")%> 
            </td> 
           </tr> 
           <tr> 
            <%=RightCellB%> 
           </tr> 
           <tr> 
            <td style="text-align:right;"> 
             <%=w_Description%>:&nbsp; 
            </td> 
            <td> 
             <%=Left(rs("Keyword"), 23)%> 
            </td> 
           </tr> 
           <tr> 
            <td style="text-align:right; padding-bottom:7px;"> 
             Size:&nbsp; 
            </td> 
            <%=RightCellC%> 
           </tr> 
          </table> 

         </div> 
        </td> 

Answer 1

我的假设 - 不具有页的实况实例 - 是您的填充和宽度％的计算不同在Mozilla，另外，有时Mozilla的要求“显示：内联块”，以便显示DIV和A标签的方式与IE相同。

我强烈建议研究这两种浏览器解释CSS的差异，特别是它们的填充/边距计算。

最后说明 - 您正在将表嵌入不符合W3C规范的表中。