Question

我有一个网页，在IE和Firefox中看起来像我想要的那样，但是在Chrome中改变了布局。

以下是未正确样式的部分的HTML

<div class="formInformation">
                    <div class="reason">
                        <h2><b>Why are you requesting a new badge?</b></h2>
                        <asp:RadioButtonList ID="rblReason" runat="server" AutoPostBack="true"
                            RepeatDirection="Vertical" Width="350px" 
                            onselectedindexchanged="rblReason_SelectedIndexChanged">
                            <asp:ListItem Value="Broken">Broken</asp:ListItem>
                            <asp:ListItem Value="Faded">Faded</asp:ListItem>
                            <asp:ListItem Value="Lost">Lost</asp:ListItem>
                            <asp:ListItem Value="Not Work">Doesn&#39;t Work</asp:ListItem>
                            <asp:ListItem Value="Name Change">Name Change</asp:ListItem>
                            <asp:ListItem Value="Title Change">Title Change</asp:ListItem>
                            <asp:ListItem Value="Dept Change">Dept/Location Change</asp:ListItem>
                            <asp:ListItem Value="Other">Other</asp:ListItem>
                        </asp:RadioButtonList>
                        <asp:RequiredFieldValidator 
                            ID="rfvReason" 
                            runat="server" 
                            ControlToValidate="rblReason"
                            Display="None"
                            ErrorMessage="Select a reason for your request">
                        </asp:RequiredFieldValidator>
                    </div>
                    <div class="reason">
                        <h3><b>Further Information:</b></h3>
                        <h6>(Fields will become visible depending on your selection to the left)</h6>
                        <asp:Panel ID="pnlLost" runat="server" Visible="False"> 
                            <div class="pnlText"><h5><b>Are you enrolled in QuickCharge?</b></h5></div>
                            <asp:RadioButtonList ID="rblLost" runat="server"
                                RepeatDirection="Horizontal" Width="350px">
                                <asp:ListItem>Yes</asp:ListItem>
                                <asp:ListItem>No</asp:ListItem>
                            </asp:RadioButtonList>
                            <asp:RequiredFieldValidator 
                                ID="rfvLost" 
                                runat="server" 
                                ControlToValidate="rblLost"
                                Display="None"
                                ErrorMessage="Make a selection for QuickCharge">
                            </asp:RequiredFieldValidator>
                        </asp:Panel>
                        <asp:Panel ID="pnlDoesNotWork" runat="server" Visible="False">
                            <div class="pnlText"><h5><b>Explain what is not working:</b></h5></div>
                            <asp:TextBox ID="txtNotWorking" runat="server" TextMode="MultiLine" 
                                    Width="225px"></asp:TextBox>
                            <asp:RequiredFieldValidator 
                                ID="rfvNotWorking" 
                                runat="server" 
                                ControlToValidate="txtNotWorking"
                                Display="None"
                                ErrorMessage="Describe what is not working">
                        </asp:RequiredFieldValidator>
                        </asp:Panel>
                        <asp:Panel ID="pnlNameChange" runat="server" Visible="False">
                            <div class="pnlText"><h4><b>!-For a name change-!</b></h4></div>
                            <div class="pnlText">Please contact HR: 770.836.9517</div>
                        </asp:Panel>
                        <asp:Panel ID="pnlTitleChange" runat="server" Visible="False">
                            <div class="pnlText"><h5><b>What is your new title?</b></h5></div>
                            <asp:TextBox ID="txtNewTitle" runat="server" TextMode="MultiLine" 
                                    Width="225px"></asp:TextBox>
                            <asp:RequiredFieldValidator 
                                ID="rfvNewTitle" 
                                runat="server" 
                                ControlToValidate="txtNewTitle"
                                Display="None"
                                ErrorMessage="Enter your new title">
                        </asp:RequiredFieldValidator>
                        </asp:Panel>
                        <asp:Panel ID="pnlDeptLocation" runat="server" Visible="False">
                            <div class="pnlText"><h5><b>What is your new Dept/Location?</b></h5></div>
                            <asp:TextBox ID="txtNewLocation" runat="server" TextMode="MultiLine" 
                                    Width="225px"></asp:TextBox>
                            <asp:RequiredFieldValidator 
                                ID="rfvNewLocation" 
                                runat="server" 
                                ControlToValidate="txtNewLocation"
                                Display="None"
                                ErrorMessage="Enter your new department/location">
                        </asp:RequiredFieldValidator>
                        </asp:Panel>
                        <asp:Panel ID="pnlOther" runat="server" Visible="False">
                            <div class="pnlText"><h5><b>Elaborate:</b></h5></div>
                            <asp:TextBox ID="txtOther" runat="server" TextMode="MultiLine" 
                                    Width="225px"></asp:TextBox>
                            <asp:RequiredFieldValidator 
                                ID="rfvOther" 
                                runat="server" 
                                ControlToValidate="txtOther"
                                Display="None"
                                ErrorMessage="Please describe your reason for this request">
                        </asp:RequiredFieldValidator>
                        </asp:Panel>
                    </div>
                </div>

以下是设置页面样式的CSS：

h2
{
    font-size: large;
}
h3
{
    margin-bottom: 0px;
}
h4
{
    color: Red;
}
h6
{
    margin-top: 0px;
}
.content
{
    width:950px;
    margin: 5px auto;
    font-family:Arial, Helvetica, Sans-Serif;
    font-size:.90em;
    overflow:hidden; 
    background-color:   rgb(255,255,255);   /* Needed for IEs */
    -moz-box-shadow:    0 3px 5px 3px #ccc;
    -webkit-box-shadow: 0 3px 5px 3px #ccc;
    box-shadow:         0 3px 5px 3px #ccc;
}
.formText
{
    width: 950px;
    padding-left: 25px;
}
.Headers
{
    margin-bottom: 20px;
    float: left;
    width: 480px;
    height: 30px;
}
.employeeInfo
{
    width: 900px;
    height: 85px;
}
.text
{
    float: left;
    width: 85px;
    margin-right: 5px;
    height: 20px;
}
.contacttext
{
    width: 150px;
}
.field
{
    float: left;
    width: 230px;
    margin: 0px 123px 20px 0px;
}   
.formInformation
{
    width: 900px;
    border-top: medium dotted #678F00;
}
.reason
{
    width: 400px;
    margin: 0px 45px 20px 0px;
    float: left;
}
.special
{
    width: 900px;
    float: left;
    border-top: medium dotted #678F00;
}
.dropDownMenu
{
    width: 375px;
}
#ddlSpecialInstructions
{
    margin-bottom: 20px;
}
.sendBadge
{
    width: 900px;
    float: left;
}
.SubmitButton
{
    float: left;
    width: 480px;
    height: 30px;
    margin-bottom: 40px;
}
#btnSubmitRequest
{
    background-color: #00529B;
    color: White;
    font-size: medium;
    font-weight: bolder;
    border: px solid #666666;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;

    /*Transition*/
    -webkit-transition: Top 0.5s ease;
    -moz-transition: All 0.5s ease;
    transition: All 0.5s ease;

    /*Rounded Corners*/
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Shadow*/
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
}
#btnSubmitRequest:hover
{
    background-color: #678F00;
}

这是页面应该是这样的： enter image description here

这就是Chrome中的样子： enter image description here

正如您所看到的，在Chrome中，中间部分会重新排列。是什么导致它的想法？如果您需要查看我的更多代码（HTML和/或C＃脚本），请告诉我，我会发布它们。

提前致谢！

并且总是如此，如果我错过了网站上已有的问题，但会解决我的问题，请指出我。

Answer 1

没有输出的标记就很难分辨（你现在包括的是ASP）。

然而，从它的外观来看，我很确定你所遇到的问题与清除浮动有关，请尝试像这样调整你的CSS：

.reason
{
    width: 400px;
    margin: 0px 45px 20px 0px;
    float: left;
    clear: left;
}

请注意，这几乎肯定意味着您的所有.reason块都落在另一块之下（这不是您所追求的）。您可以将清除添加到.reason:first-child，但这一切都取决于输出到视图时标记的顺序..

页面布局适用于IE和Firefox，但不适用于Chrome

1 个答案: