页面布局适用于IE和Firefox，但不适用于Chrome [英] Page layout works in IE and Firefox, but not Chrome
本文介绍了页面布局适用于IE和Firefox，但不适用于Chrome的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是HTML格式不正确的部分
< div class =formInformation>
< div class =reason>
< h2>< b>为什么要申请新徽章？< / b>< / h2>
< asp：RadioButtonList ID =rblReasonrunat =serverAutoPostBack =true
RepeatDirection =VerticalWidth =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>名称更改< / asp：ListItem>
< asp：ListItem Value =标题更改>标题更改< / asp：ListItem>
< asp：ListItem Value =Dept Change> Dept / Location Change< / asp：ListItem>
< asp：ListItem Value =其他>其他< / asp：ListItem>
< / asp：RadioButtonList>
< asp：RequiredFieldValidator
ID =rfvReason
runat =server
ControlToValidate =rblReason
Display =None
ErrorMessage =选择您的请求的原因>
< / asp：RequiredFieldValidator>
< / div>
< div class =reason>
< h3>< b>其他信息：< / b>< / h3>
< h6>（根据您的选择，字段将变为可见）< / h6>
< asp：Panel ID =pnlLostrunat =serverVisible =False>
< div class =pnlText>< h5>< b>您是否已加入QuickCharge？< / b>< / h5>< / div>
< asp：RadioButtonList ID =rblLostrunat =server
RepeatDirection =HorizontalWidth =350px>
< asp：ListItem>是< / asp：ListItem>
< asp：ListItem>无< / asp：ListItem>
< / asp：RadioButtonList>
< asp：RequiredFieldValidator
ID =rfvLost
runat =server
ControlToValidate =rblLost
Display =None
ErrorMessage =选择QuickCharge>
< / asp：RequiredFieldValidator>
< / asp：Panel>
< asp：Panel ID =pnlDoesNotWorkrunat =serverVisible =False>
< div class =pnlText>< h5>< b>解释什么不起作用：< / b>< / h5>< / div>
< asp：TextBox ID =txtNotWorkingrunat =serverTextMode =MultiLine
Width =225px>< / asp：TextBox>
< asp：RequiredFieldValidator
ID =rfvNotWorking
runat =server
ControlToValidate =txtNotWorking
Display =None
ErrorMessage =描述什么不工作>
< / asp：RequiredFieldValidator>
< / asp：Panel>
< asp：Panel ID =pnlNameChangerunat =serverVisible =False>
< div class =pnlText>< h4>< b>！ - 名称更改 - ！< / b>< / h4>< / div>
< div class =pnlText>请联系HR：770.836.9517< / div>
< / asp：Panel>
< asp：Panel ID =pnlTitleChangerunat =serverVisible =False>
< div class =pnlText>< h5>< b>您的新标题是什么？< / b>< / h5>< / div>
< asp：TextBox ID =txtNewTitlerunat =serverTextMode =MultiLine
Width =225px>< / asp：TextBox>
< asp：RequiredFieldValidator
ID =rfvNewTitle
runat =server
ControlToValidate =txtNewTitle
Display =None
ErrorMessage =输入新标题>
< / asp：RequiredFieldValidator>
< / asp：Panel>
< asp：Panel ID =pnlDeptLocationrunat =serverVisible =False>
< div class =pnlText>< h5>< b>您的新部门/位置是什么？< / b>< / h5>< / div>
< asp：TextBox ID =txtNewLocationrunat =serverTextMode =MultiLine
Width =225px>< / asp：TextBox>
< asp：RequiredFieldValidator
ID =rfvNewLocation
runat =server
ControlToValidate =txtNewLocation
Display =None
ErrorMessage =输入新的部门/位置>
< / asp：RequiredFieldValidator>
< / asp：Panel>
< asp：Panel ID =pnlOtherrunat =serverVisible =False>
< div class =pnlText>< h5>< b>详细说明：< / b>< / h5>< / div>
< asp：TextBox ID =txtOtherrunat =serverTextMode =MultiLine
Width =225px>< / asp：TextBox>
< asp：RequiredFieldValidator
ID =rfvOther
runat =server
ControlToValidate =txtOther
Display =None
ErrorMessage =请描述您的请求原因>
< / asp：RequiredFieldValidator>
< / asp：Panel>
< / div>
< / div>
以下是CSS风格我的页面：
h2
{
font-size：large;
}
h3
{
margin-bottom：0px;
}
h4
{
颜色：红色;
}
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）; / *需要IE浏览器* /
-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;
}
。标题
{
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：中点＃678F00;
}
。理由
{
width：400px;
margin：0px 45px 20px 0px;
float：left;
}
.special
{
width：900px;
float：left;
border-top：中点＃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;
颜色：白色;
font-size：medium;
font-weight：bold;
border：px solid＃666666;
overflow：hidden;
display：block;
margin-bottom：20px;
/ *转换* /
-webkit-transition：0.5％
-moz-transition：所有0.5s缓解;
过渡：所有0.5s缓解;
/ *圆角* /
border-radius：30px;
-webkit-border-radius：30px;
-moz-border-radius：30px;
$ b $ * 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：线性渐变（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;
$ b $ p
$ b 页面应该是这样的：
< img src =https://i.stack.imgur.com/EYW0a.pngalt =在这里输入图片描述>
这就是它的样子在Chrome浏览器中：
<正如你所看到的，在Chrome中间部分被重新安排。任何想法是什么造成的？如果您需要查看更多我的代码（HTML和/或C＃脚本），请让我知道，我将发布它们。
预先感谢！
和像往常一样，如果我错过了一个已经在网站上的问题，但会纠正我的问题，请指向我。
解决方案在没有输出标记的情况下，很难判断（目前包含的是ASP）。
<但是，从外观上看，我相当确定你所遇到的问题与清理浮动内容有关，请尝试像这样调整CSS：
.reason
{
width：400px;
margin：0px 45px 20px 0px;
float：left;
clear：left;
$ / code>
请注意，这几乎肯定意味着所有的。原因块落在另一个之下（这不是你所追求的）。您可以将清除添加到 .reason：first-child ，但是这一切都取决于输出到视图中时标记的顺序。
I have a web page that looks the way I want it to in IE and firefox, but the layout gets changed around in Chrome.
Here is the HTML for the section the is not styling correctly
<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>
Here is the CSS to style my page:
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;
}
This is what the page is supposed to look like:
This is what it looks like in Chrome:
As you can see, in Chrome the middle section gets re-arranged. Any ideas what is causing it? If you need to see more of my code (HTML and/or C# scripts) just let me know and I will post them.
Thanks in advance!
and like always, If i missed a question that is already on the site, but would correct my problem, please point me to it.
解决方案 It's very difficult to tell without the outputted markup (what you've included at the moment is the ASP).
However, from the looks of it I'm fairly sure that the issue you're having relates to clearing floats, try tweaking your CSS like this:
.reason
{
width: 400px;
margin: 0px 45px 20px 0px;
float: left;
clear: left;
}
Note that this will almost certainly mean all your .reason blocks fall one beneath the other (which isn't what you're after). You might be able to add the clear to .reason:first-child, but it all depends on the order of your markup when outputted into the view..
这篇关于页面布局适用于IE和Firefox，但不适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
