asp.net - asp.net Web サイトに問題があります。Firefox でブラウジングすると updatepanel または div 領域が中央に配置されませんが、他のブラウザーでは正常に動作します

Question

私はasp.net(vb)で書かれたウェブサイトプロジェクトを持っています。IE または Chrome で Web サイトを閲覧している間は問題なく動作していますが、Firefox で試していると問題が発生します。メインの div 領域 (または更新パネル、不明) が中央または適切な位置に表示されていません。右端に散らばって表示されています。div は asp updatepanel の下にあります。提案にご協力ください。

部分的なコードは次のとおりです。

    <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.