asp.net - 使用 asp.net 网站时遇到问题。在Firefox中浏览时updatepanel或div区域不居中，但在其他浏览器中工作正常

Question

我有一个用 asp.net(vb) 编写的网站项目。当我使用 IE 或 Chrome 浏览网站时，它运行良好，但在尝试使用 Firefox 时，它遇到了一些问题。主 div 区域（或更新面板，不确定）未显示在中心或正确位置。它以最右边和分散的方式显示。div 位于 asp 更新面板下。请帮忙提出建议。

这是部分代码：

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
<style>`enter code here`
h4
{
    padding:3px;
}
table td
{
    padding:3px;
    white-space:nowrap
}

#tblResults td
{
    border:1px solid #CCCCCC;
    padding:2px;
    text-align:right;
    white-space:nowrap;
    font-size:11px
}

input
{
    font-size:12px;
}
</style>

<script type="text/javascript" src='<%= ResolveUrl("~/js/jquery-1.8.1.js") %>' ></script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="wrapper bot" style="margin-left:auto; margin-right:auto; padding: 0;">
  <div style="border-bottom:1px solid #CCCCCC; ">
        <table width="100%" align="center">
        <tr>
        <td valign="bottom">
        <h2 >ZFlex Calculator</h2>
        </td>
        <td valign="bottom" align="right" style="padding-bottom:7px">
        <asp:LinkButton runat='server' Text="Calculate" ID="btnRecalculate" CausesValidation="true" CssClass="button" />
        <asp:LinkButton runat='server' Text="Print" ID="lnkPrint" CausesValidation="true" CssClass="button" />
        </td>
        </tr>
        </table>
    </div>
     <asp:ValidationSummary ID="ValidationSummary1" runat='server' DisplayMode="BulletList"  style="margin-top:5px;padding:10px;border:1px solid #DDDDDD;color:red" />
         <div style="padding:5px;margin-bottom:10px;margin-top:10px;border: 1px solid #CCCCCC">
        <table align="center">
<tr>
    <td >Wall Type:</td>
    <td >
        <asp:RadioButtonList runat="server" ID="rblWallType" RepeatDirection=Horizontal>
         <asp:ListItem Value="1" Selected=True>Single Wall</asp:ListItem>
            <asp:ListItem Value="2">Double Wall</asp:ListItem>
        </asp:RadioButtonList>
    </td>
</tr>
<tr>
    <td >Category:</td>
    <td >
        <asp:RadioButtonList runat="server" ID="rblCategory" RepeatDirection=Horizontal >
            <asp:ListItem Value="1" style="padding:3px" selected="True">Category 1</asp:ListItem>
            <asp:ListItem Value="2" style="padding:3px">Category 2</asp:ListItem>
            <asp:ListItem Value="3" style="padding:3px">Category 3</asp:ListItem>
            <asp:ListItem Value="4" style="padding:3px">Category 4</asp:ListItem>
        </asp:RadioButtonList>
    </td>
</tr>
<tr>
<td >Fuel Type:</td>
<td >
    <asp:RadioButtonList runat="server" ID="rblFuelType"  RepeatDirection=Horizontal>
        <asp:ListItem Value="1" Selected>Gas</asp:ListItem>
        <asp:ListItem Value="2">LP</asp:ListItem>
        <asp:ListItem Value="3">#2 Fuel Oil</asp:ListItem>
    </asp:RadioButtonList>
</td>
</tr>
<tr>
<td>Stack Type:</td>
<td>
    <asp:RadioButtonList runat="server" ID="rblExhaustType" RepeatDirection=Horizontal>
        <asp:ListItem Value="1" Selected>Exhaust Only</asp:ListItem>
        <asp:ListItem Value="2">Exhaust and Combustion</asp:ListItem>
    </asp:RadioButtonList>
</td>
</tr>
</table>
   </div>
<div style="margin-bottom:15px">
    <h4>Project Information</h4>
    <table align="center">
        <tr>
            <td>Project Name:</td>
            <td><asp:TextBox ID="Pnametxt" runat="server" /></td>
            <td>Project For:</td>
            <td><asp:TextBox ID="PForTxt" runat="server"></asp:TextBox></td>
            <td>Company:</td>
            <td><asp:TextBox ID="PCompanyTxt" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Project Location City:</td>
            <td><asp:TextBox ID="PCitytxt" runat="server"></asp:TextBox></td>
            <td>Project Location State:</td>
            <td><asp:TextBox ID="PStateTxt" runat="server"></asp:TextBox></td>
        </tr>
    </table>
</div>

<asp:TabContainer ID="tbcTheaterTabs" AutoPostBack="true"  runat="server" Width="100%" style="margin-top:5px" cssclass="myTabs" EnableViewState="true"    >
<asp:TabPanel ID="tabInputs" runat="server"  HeaderText="&nbsp;&nbsp;&nbsp;System Inputs&nbsp;&nbsp;&nbsp;" >
<ContentTemplate>

<h4>Appliance Information</h4>
<table>
<tr>
    <td>Maximum Input (MBH):</td>
            <td>
                <asp:TextBox ID="MaxInputTxt" runat="server" Width="70px" ValidationGroup="BInputsVal">1000</asp:TextBox>
                <asp:RangeValidator ID="RangeValidator1" runat="server" 
                    ControlToValidate="MaxInputTxt" ErrorMessage="*" ForeColor="Red" 
                    MaximumValue="100000000" MinimumValue="10" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
                    ControlToValidate="MaxInputTxt" ErrorMessage="*" ForeColor="Red" 
                    SetFocusOnError="True"></asp:RequiredFieldValidator>
            </td>
            <td>CO2% in Flue Gas:</td>
            <td colspan="7">
                <asp:TextBox ID="CO2Txt" runat="server" Width="70px" 
                    ValidationGroup="BInputsVal">8.0</asp:TextBox>
                <asp:RangeValidator ID="RangeValidator5" runat="server" 
                    ControlToValidate="CO2Txt" ErrorMessage="*" ForeColor="Red" MaximumValue="15" 
                    MinimumValue=".5" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" 
                    ControlToValidate="CO2Txt" ErrorMessage="*" ForeColor="Red" 
                    SetFocusOnError="True"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>Minimum Input (MBH):</td>
            <td>
                <asp:TextBox ID="MinInputTxt" runat="server" Width="70px" 
                    ValidationGroup="BInputsVal">500</asp:TextBox>
                <asp:RangeValidator ID="RangeValidator2" runat="server" 
                    ControlToValidate="MinInputTxt" ErrorMessage="*" ForeColor="Red" 
                    MaximumValue="100000000" MinimumValue="0" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
                    ControlToValidate="MinInputTxt" ErrorMessage="*" ForeColor="Red" 
                    SetFocusOnError="True"></asp:RequiredFieldValidator>
            </td>
            <td>Ambient Temp. (F):</td>
            <td colspan="7">
                <asp:TextBox ID="AmbientTempTxt" runat="server" Width="70px" 
                    ValidationGroup="BInputsVal">70</asp:TextBox>
                <asp:RangeValidator ID="RangeValidator6" runat="server" 
                    ControlToValidate="AmbientTempTxt" ErrorMessage="*" ForeColor="Red" 
                    MaximumValue="200" MinimumValue="-100" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" 
                    ControlToValidate="AmbientTempTxt" ErrorMessage="*" ForeColor="Red" 
                    SetFocusOnError="True"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>Maximum Gross Temp (F):</td>
            <td>
                <asp:TextBox ID="MaxTempTxt" runat="server" Width="70px" 
                    ValidationGroup="BInputsVal">300</asp:TextBox>
                <asp:RangeValidator ID="RangeValidator3" runat="server" 
                    ControlToValidate="MaxTempTxt" ErrorMessage="*" ForeColor="Red" 
                    MaximumValue="1400" MinimumValue="100" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" 
                    ControlToValidate="MaxTempTxt" ErrorMessage="*" ForeColor="Red" 
                    SetFocusOnError="True"></asp:RequiredFieldValidator>
            </td>
            <td>Altitude (Ft.):</td>
            <td colspan="7">
                <asp:TextBox ID="AltitudeTxt" runat="server" Width="70px" 
                    ValidationGroup="BInputsVal">500</asp:TextBox>
                <asp:RangeValidator ID="RangeValidator7" runat="server" 
                    ControlToValidate="AltitudeTxt" ErrorMessage="*" ForeColor="Red" 
                    MaximumValue="30000" MinimumValue="0" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server" 
                    ControlToValidate="AltitudeTxt" ErrorMessage="*" ForeColor="Red" 
                    SetFocusOnError="True"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>Minimum Gross Temp.(F):</td>
            <td>
                <asp:TextBox ID="MinTempTxt" runat="server" Width="70px" 
                    ValidationGroup="BInputsVal">200</asp:TextBox>
                <asp:RangeValidator ID="RangeValidator4" runat="server" 
                    ControlToValidate="MinTempTxt" ErrorMessage="*" ForeColor="Red" 
                    MaximumValue="1400" MinimumValue="70" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" 
                    ControlToValidate="MinTempTxt" ErrorMessage="*" ForeColor="Red" 
                    SetFocusOnError="True"></asp:RequiredFieldValidator>
            </td>
            <td class="style6">
                Exhaust Allowable Pressure Range:</td>
            <td class="style2" colspan="2" width="50">
                Max.</td>
            <td colspan="2" width="150">
                <asp:TextBox ID="MaxPressureTxt" runat="server" style="margin-left: 0px" 
                    ValidationGroup="BInputsVal">.25</asp:TextBox>
                <asp:RangeValidator ID="RangeValidator8" runat="server" 
                    ControlToValidate="MaxPressureTxt" ErrorMessage="*" ForeColor="Red" 
                    MaximumValue="10.0" MinimumValue="-2.0" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" 
                    ControlToValidate="MaxPressureTxt" ErrorMessage="*" ForeColor="Red" 
                    SetFocusOnError="True"></asp:RequiredFieldValidator>
            </td>
            <td colspan="2" width="50">Min.</td>
            <td width="150">
                <asp:TextBox ID="MinPressureTxt" runat="server" ValidationGroup="BInputsVal">-.25</asp:TextBox>
                <asp:RangeValidator ID="RangeValidator9" runat="server" 
                    ControlToValidate="MinPressureTxt" ErrorMessage="*" ForeColor="Red" 
                    MaximumValue="2" MinimumValue="-2" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" 
                    ControlToValidate="MinPressureTxt" ErrorMessage="*" ForeColor="Red" 
                    SetFocusOnError="True"></asp:RequiredFieldValidator>
            </td>
        </tr>
        </table>
    <hr />
    <asp:Panel ID="Combustion" runat="server">

    <h4>Combustion Duct Information</h4>

    <table >
    <tr>
        <td>Total Duct Length:</td>
        <td>
                    <asp:TextBox ID="CADuctLengthTxt" runat="server">20</asp:TextBox>
                    <asp:RangeValidator ID="RangeValidator10" runat="server" 
                        ControlToValidate="CADuctLengthTxt" ErrorMessage="*" ForeColor="Red" 
                        MaximumValue="10000" MinimumValue="0" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" 
                        ControlToValidate="CADuctLengthTxt" ErrorMessage="*" ForeColor="Red" 
                        SetFocusOnError="True"></asp:RequiredFieldValidator>
                </td>
                <td colspan="2">15 Degree Elbow:</td>
                <td class="style78" colspan="2">
                    <asp:TextBox ID="CA15ElTxt" runat="server">0</asp:TextBox>
                    <asp:RangeValidator ID="RangeValidator18" runat="server" 
                        ControlToValidate="CA15ElTxt" ErrorMessage="*" ForeColor="Red" 
                        MaximumValue="10" MinimumValue="0" SetFocusOnError="True" Type="Integer"></asp:RangeValidator>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" 
                        ControlToValidate="CA15ElTxt" ErrorMessage="*" ForeColor="Red" 
                        SetFocusOnError="True"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>WYE Tee:</td>
                <td>
                    <asp:TextBox ID="CAWyeTeeTxt" runat="server">0</asp:TextBox>
                    <asp:RangeValidator ID="RangeValidator11" runat="server" 
                        ControlToValidate="CAWyeTeeTxt" ErrorMessage="*" ForeColor="Red" 
                        MaximumValue="10" MinimumValue="0" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator14" runat="server" 
                        ControlToValidate="CAWyeTeeTxt" ErrorMessage="*" ForeColor="Red" 
                        SetFocusOnError="True"></asp:RequiredFieldValidator>
                </td>
                <td class="style23" colspan="2">
                    30 Degree Elbow:</td>
                <td class="style78" colspan="2">
                    <asp:TextBox ID="CA30ElTxt" runat="server">0</asp:TextBox>
                    <asp:RangeValidator ID="RangeValidator19" runat="server" 
                        ControlToValidate="CA30ElTxt" ErrorMessage="*" ForeColor="Red" 
                        MaximumValue="10" MinimumValue="0" SetFocusOnError="True" Type="Integer"></asp:RangeValidator>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator22" runat="server" 
                        ControlToValidate="CA30ElTxt" ErrorMessage="*" ForeColor="Red" 
                        SetFocusOnError="True"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="style20">
                    90 Degree Tee:</td>
                <td class="style24">
                    <asp:TextBox ID="CA90TeeTxt" runat="server">0</asp:TextBox>
                    <asp:RangeValidator ID="RangeValidator12" runat="server" 
                        ControlToValidate="CA90TeeTxt" ErrorMessage="*" ForeColor="Red" 
                        MaximumValue="10" MinimumValue="0" SetFocusOnError="True" Type="Integer"></asp:RangeValidator>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator15" runat="server" 
                        ControlToValidate="CA90TeeTxt" ErrorMessage="*" ForeColor="Red" 
                        SetFocusOnError="True"></asp:RequiredFieldValidator>
                </td>
                <td class="style23" colspan="2">
                    45 Degree Elbow:</td>
                <td class="style78" colspan="2">
                    <asp:TextBox ID="CA45ElTxt" runat="server">0</asp:TextBox>
                    <asp:RangeValidator ID="RangeValidator20" runat="server" 
                        ControlToValidate="CA45ElTxt" ErrorMessage="*" ForeColor="Red" 
                        MaximumValue="10" MinimumValue="0" SetFocusOnError="True" Type="Double"></asp:RangeValidator>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

Answer 1

你不能可靠地使用 margin: 0 auto; 如果对象不是 body 元素的直接子元素，则将它们居中。如果 div 是 body 元素的直接子元素并且 body 元素设置为 width: 100%，那么剩下的唯一重要方面是为您希望居中的容器设置固定宽度，在您的情况下：div.wrapper

如果你有一个链接，我可以为你缩小答案，但这些通常是很好的生活规则。如果您在不是 100% 页面宽度的元素中工作，简单的解决方法是使用数学边距计算。例如，如果容器 div 是 800px 宽，而您想要居中的 div 是 500px，您只需将要居中的 div 设置为 margin-left: 150px; (800 - 500) / 2。