Question

我正在重新布置一个旧的asp页面，以便根据一些新要求对其进行更新。我试图在td单元格中放入一些div标签，因为td单元格中的表格无法实现我所追求的目标。所以，基本上我有一个div应该对齐到左上角，另一个div也应该对齐顶部填充剩余的空间，div下面用一行文本，div下面包含一个图像应该水平和垂直居中，最后一个div应低于图像，并与细胞底部对齐。我有（看下面的代码）奠定了它，以便它在IE中工作，但它看起来像chrome和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需要'display：inline-block'才能显示DIV和A标签相同IE的方式。

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

最后注意 - 您在表格中嵌入了一个不符合W3C规范的表格。

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

1 个答案: