【发布时间】：2013-06-01 07:20:29
【问题描述】：
我有一个网页在 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# 脚本），请告诉我，我会发布它们。
提前致谢！
和往常一样，如果我错过了网站上已有的问题，但可以纠正我的问题，请指出。
【问题讨论】：
-
绝对发布您的 HTML 或 JSFiddle 链接，以便我们可以看到您的标记是什么。没有它，诊断问题会困难得多。
-
我为格式不正确的部分添加了 HTML
-
没有生成的html。不是 asp 什么 html
-
之前没有使用过 jsfiddle，所以我一直在尝试让它工作。问题是我的脚本在 C# 中，所以 jsfiddle 没有正确运行它。我认为 johnkavanagh 的回答会奏效。
-
我有解决办法。我将其中一个“原因”div 更改为它自己的名称，并将其样式设置为向左浮动。然后我使用了约翰在他的回答中建议的“清晰”风格。通过这种组合，它在所有 3 种浏览器中看起来都符合我的要求！
标签： css internet-explorer google-chrome firefox