我正在尝试使用javascript div来调试问题，在大多数情况下，javascript div会正确扩展其他内容，但会在一个场景中扩展内容。问题是，我真的不知道从哪里开始调试它。
作为背景，div应该扩展到ASP.NET中的第三方网格控件。
在Firefox 5或Chrome 13中，浏览部署的开发服务器上的站点或从Visual Studio本地运行它，div可以正常扩展。使用IE8在本地运行站点，效果也将正常扩展。但是，在部署的站点上使用IE8会显示div在网格控件下扩展。
这告诉我，问题是我的笔记本电脑和开发服务器之间存在差异。从那里我迷失了如何隔离问题并纠正它。
以下是我在页面中使用的代码：
<div class="ColumnDiv">
<span>
<asp:TextBox ID="ColumnTextBox" runat="server" CssClass="textbox">Show Columns</asp:TextBox>
<img id="ColumnArrow" src="<%= Page.ResolveUrl("~")%>images/DropDownArrow.jpg" style="margin-left: -22px; margin-bottom: -5px" />
<asp:label id="RedAsterisk" style="color:Red; font-weight:bold;" runat="server">*</asp:label>
</span>
<div id="ColumnEffect" class="ui-widget-content" style="height: 145px !important;">
<asp:CheckBoxList ID="ColumnChecks" runat="server">
<asp:ListItem Text="Select All" Value="Select All" />
<!-- Other list items -->
</asp:CheckBoxList>
</div>
</div>
<div>(Control resides here</div>
以下是相关的CSS：
#ColumnEffect
{
width: 249px;
height: 200px;
padding: 0.4em;
left:-1px;
top:20px;
position: absolute;
overflow: auto;
font-family:Calibri, Verdana, Tahoma;
font-size:10pt;
color:Black;
font-weight:normal;
text-decoration:none;
z-index:1;
}
触发扩展/折叠的jquery：
function RunColumnEffect() {
if (!($('#ColumnEffect').is(":visible")))
{
$("#ColumnEffect").show('blind', 200);
}
else
{
$("#ColumnEffect").hide('blind', 200);
}
};
答案 0 :(得分：3)
问题必须是IE8以不同的“浏览器模式”显示“已部署的站点”。
点击F12调出开发人员工具，查看正在使用的模式。
在<head>中添加此内容将解决问题：
<meta http-equiv="X-UA-Compatible" content="IE=edge">