我的网页在 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'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# 脚本)，请告诉我，我会发布它们。
提前致谢!
和往常一样，如果我错过了网站上已有的问题，但可以纠正我的问题，请指出。
最佳答案
如果没有输出的标记，很难分辨(您目前包含的是 ASP)。
但是，从它的外观来看，我相当确定您遇到的问题与清除 float 有关，请尝试像这样调整您的 CSS:
.reason
{
width: 400px;
margin: 0px 45px 20px 0px;
float: left;
clear: left;
}
请注意，这几乎肯定意味着您所有的 .reason block 都一个一个地放在另一个下面(这不是您想要的)。您可以将清除添加到 .reason:first-child，但这完全取决于输出到 View 中时标记的顺序。
关于css - 页面布局适用于 IE 和 Firefox，但不适用于 Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16942514/