0

我有一个网页在 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;
}

这是页面应该看起来的样子: 在此处输入图像描述

这是它在 Chrome 中的样子: 在此处输入图像描述

如您所见,在 Chrome 中,中间部分被重新排列。任何想法是什么原因造成的?如果您需要查看更多我的代码(HTML 和/或 C# 脚本),请告诉我,我会发布它们。

提前致谢!

和往常一样,如果我错过了网站上已有的问题,但会纠正我的问题,请指出我。

4

1 回答 1

0

如果没有输出的标记(您目前包含的是 ASP),很难分辨。

但是,从它的外观来看,我相当确定您遇到的问题与清除浮动有关,请尝试像这样调整您的 CSS:

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

请注意,这几乎肯定意味着您的所有.reason块都位于另一个之下(这不是您所追求的)。您也许可以将 clear 添加到.reason:first-child,但这完全取决于输出到视图中时标记的顺序。

于 2013-06-05T14:35:11.297 回答