【发布时间】：2012-11-02 16:15:42
【问题描述】：
愚蠢的 IE9 搞砸了我的 aspx 页面布局。 在 chrome 中它看起来很完美：
但是在 EI9 中，它弄乱了我的布局，使它看起来像这样：
我已经弄清楚为什么它看起来像现在这样。显然 IE9 将我的“保存笔记”按钮、描述标签和描述文本框封装在一个 div 中并使其浮动。而主内容持有人显示双重的原因是因为IE复制了它，但在复制的内容持有人中，它没有控件或任何东西。只是背景颜色。
这是它生成的html：
<div class="mainContentHolder">
<span style="display: none;">
<label>File</label>
<label style="width: auto;" id="lblCaseFileID">2011630988 - </label>
</span>
<h3 id="quickNoteHeader">Quick Note: 2011630988 / 10/04/2012 08:47:12 <div style="float: right;">USES CURRENT DATE AND TIME<div></div></div></h3><div style="float: right;"><div>
<span>
<label class="inlineLbl">Description</label>
<input style="width: 82%;" id="txtDescription" name="txtDescription" type="text">
<span style="color: red; display: none;" id="ctl02" class="validation" title="Description is required">*</span>
<input style="width: 75px;" id="saveNote" onclick="saveNewQuickNote()" name="saveNote" value="Save Note" type="button">
</span>
</div>
<input id="hidCaseFileID" name="hidCaseFileID" value="2011630988" type="hidden">
<input id="hidInvestigatorLoggedOnID" name="hidInvestigatorLoggedOnID" value="25" type="hidden">
</div>
<div class="mainContentHolder">
<div style="float: right;">
</div>
这是我的 .aspx 页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="form1" runat="server">
<div class="mainContentHolder">
<span style="display:none;">
<label>File</label>
<label style="width:auto;" runat="server" id="lblCaseFileID"></label>
</span>
<h3 runat="server" id="quickNoteHeader">Quick Note</h3>
<span>
<label class="inlineLbl">Description</label>
<input type="text" style="width:82%;" id="txtDescription" runat="server" />
<asp:RequiredFieldValidator class="validation" ErrorMessage="*" Display="Dynamic" ControlToValidate="txtDescription" ToolTip="Description is required" runat="server" />
<input type="button" ID="saveNote" style="width:75px;" Value="Save Note" runat="server" onclick="saveNewQuickNote()" />
</span>
</div>
<asp:HiddenField ID="hidCaseFileID" runat="server" />
<asp:HiddenField ID="hidInvestigatorLoggedOnID" runat="server" />
</form>
</body>
有什么建议吗？我不知道为什么 IE 这样做或如何防止它/修复它
编辑：
css:.mainContentHolder
{
margin: 0px;
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
min-width:890px;
width:920px;
height:50px;
}
.mainContentHolder h3
{
font-size:13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
margin-right: 1%;
}
.mainContentHolder label
{
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
margin-bottom: 10px;
margin-right: 1%;
}
.mainContentHolder input
{
width:70px;
}
.ui-dialog
{
font-size:12px;
}
.ui-widget-header
{
background: #8D122B;
}
.ui-datepicker
{
font-size:12px;
}
#quickNoteHeader
{
color: Green;
}
编辑 - 似乎布局在 IE 10 中确实有效。但不是 IE9
【问题讨论】：
-
你有文档类型集吗？例如你是在标准模式还是 Quirks 模式下渲染？
-
你的类定义是什么？
-
我在主问题中添加了文档类型
-
IE 不会生成 HTML，它会读取它。如果 HTML 错误，则说明输出错误。
-
如果你的课程没有 CSS，我无法复制问题
标签： asp.net css internet-explorer-9