Question

我们有一个由我们的（经典）ASP代码

创建的表

加载页面时看起来像这样......

当用户点击每条记录右侧的Edit按钮时，详细信息行可见...

在IE中它看起来像这样（这是我们想要的）：

不幸的是，在Firefox和其他浏览器（如Chrome）中，它看起来像这样：

创建它的代码是服务器端ASP代码，如下所示：

'For record editing
.Write("<TR class='rowsummary2' style=""display:none;"" id=tr_Edit" & g_lngRowCount & ">")
.Write("<td></td>")
.Write("<td></td>")
.Write("<td></td>")

.Write("<td colspan=""2"" class=""filterback"">")
'.write("<div style=""position:relative;left:150px; display:none;"" id=div_Edit" & g_lngRowCount & ">")
.Write("<table cellspacing=""2px"" cellpadding=""2px"" width=""100%"" border=""0"">")
    .Write("<tr>")
        .Write("<td class=""summaryheader2"" align=""left"" colspan=""2"">")
            .Write("<b>Edit ShPP</b>")
        .Write("</td>")
    .Write("</tr>")
    .Write("<tr>")
        .Write("<td align=""left"" width=""50%"">")
            .Write("<table width=""100%"" border=""0"" cellspacing=""2"" cellpadding=""2"">")                                   
                .Write("<tr>")
                    .Write("<td width=""20%"" class=""mandatory"">ShPP Amount Due</td>")
                    if not Null2Bool(adoRs("IsPaid")) then
                        .Write("<td colspan=""3""><input type='text' class='inputbox' name='txtShPPAmountDue' " _
                        & " id=txtShPPAmountDue" & g_lngRowCount _
                        & " value="  & formatnumber(adoRs("ShPPPayment"), 2,,,False) _
                        & " style='width:75px' onKeyPress='javascript: validKeyPressTest(/[0-9,.]$/, event)'" _
                        & " onblur='javascript: frmShPP.txtShPPPayment.value = this.value;'" _
                        & " ></input>")
                    else
                        .Write("<td class=""summarytext"">" & formatnumber(adoRs("ShPPPayment"), 2,,,False) & "</td>")
                    End if
                .Write("</tr>")

                .Write("<tr>")
                    .Write("<td valign=""top"" width=""20%"" class=""mandatory"">Reason</td>")
                    if not Null2Bool(adoRs("IsPaid")) then
                        .Write("<td colspan=""3"" class=""summarytext""><textarea " _
                        & " id=txtComment" & g_lngRowCount _
                        & " name=""txtComment"">" & null2str(adoRs("Notes")) & _
                        "</textarea></td>")
                    else
                        .Write("<td colspan=""3"" class=""summarytext"">" & null2str(adoRs("Notes")) & "</td>")
                    End if
                .Write("</tr>")
            .Write("</table>")
        .Write("</td>")
    .Write("</tr>")

    .Write("<tr>")
        .Write("<td class=""summaryheader2"" align=""right"" colspan=""2"">")
            if not Null2Bool(adoRs("IsPaid")) then
                .Write "<input title='Save' ID='btnSave" _
                        & g_lngRowCount _
                        & "' type='button' name='btnSave" _
                        & g_lngRowCount _
                        & "' value='Save' onclick=""javasript:checkAndSubmit('updaterow', " _
                        & adoRs("Period") _
                        & ")"" class='formbutton' onmouseover='this.className=&#39;formbuttonhover&#39;' onmouseout='this.className=&#39;formbutton&#39;' onfocus='this.className=&#39;formbuttonhover&#39;' onblur='this.className=&#39;formbutton&#39;'/>&nbsp;&nbsp;&nbsp;"                           
            End if
            .Write "<input title='Cancel' ID='btnCancel" _
                    & g_lngRowCount _
                    & "' type='button' name='btnCancel" _
                    & g_lngRowCount _
                    & "' value='Cancel' onclick='javasript:CancelEdit(" _
                    & g_lngRowCount & ")' class='formbutton' onmouseover='this.className=&#39;formbuttonhover&#39; ' _onmouseout='this.className=&#39;formbutton&#39;' onfocus='this.className=&#39;formbuttonhover&#39;' onblur='this.className=&#39;formbutton&#39;'/>"                            
        .Write("</td>")
    .Write("</tr>")
.Write("</table>")
.Write("</td>") ' Filterback
.Write "</tr>"

放入包含该表的hiddren TR元素的ASP代码部分是

.Write("<TR class='rowsummary2' style=""display:none;"" id=tr_Edit" & g_lngRowCount & ">")
.Write("<td></td>")
.Write("<td></td>")
.Write("<td></td>")

.Write("<td colspan=""2"" class=""filterback"">")
'.write("<div style=""position:relative;left:150px; display:none;"" id=div_Edit" & g_lngRowCount & ">")
.Write("<table cellspacing=""2px"" cellpadding=""2px"" width=""100%"" border=""0"">")
.Write("<tr>")

因此，对于每条记录，它都会创建一个隐藏的行，其中包含tr_Edit3（对于记录3）的ID和<{1}}按钮的 onclick 事件，以下javascript运行显示/隐藏详细信息表：

Edit

所以我需要在IE11中将不同浏览器中的“细节”或调整表放在中心位置......

我尝试在表格周围放置一个function HideEditTable(rowNum, IsPaid) { var iTotRows = document.getElementById("txtRowCount").value; for (i = 1; i <= iTotRows; i++) { document.getElementById("tr_Edit" + i).style.display = 'none'; //document.getElementById("div_Edit" + i).style.display = 'none'; } document.getElementById("tr_Edit" + rowNum).style.display = 'block'; //document.getElementById("div_Edit" + rowNum).style.display = 'block'; if (IsPaid == 0) { frmShPP.txtShPPPayment.value = document.getElementById("txtShPPAmountDue" + rowNum).value; frmShPP.txtNotes.value = document.getElementById("txtComment" + rowNum).value; frmShPP.txtLumpsum.value = false; // default } }元素，我绝对可以使用css定位，但没有运气（它搞砸了但很好！）

div

那我怎么能让那个内表总是显示在中间呢？

感谢菲利普

Answer 1

如果它只是表格中的一行，那么您可以使用css定位并居中：

tr {
    text-align: center;
}

或在td

上试试

Answer 2

所以为了让这个工作，我们所要做的就是改变客户端javascript

这在FF / Chrome中不起作用：

document.getElementById("tr_Edit" + rowNum).style.display = 'block';

但是，当我们拿出block它神奇地起作用时：

document.getElementById("tr_Edit" + rowNum).style.display = '';

CSS绝对定位表

2 个答案: