div 在特定服务器上的 IE 内容下展开答案

【问题标题】：div expanding under content in IE on specific serverdiv 在特定服务器上的 IE 内容下展开
【发布时间】：2011-08-27 04:52:10
【问题描述】：

我正在尝试调试 javascript div 的问题，该 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);
    }
};

【问题讨论】：

标签： javascript jquery asp.net css html

【解决方案1】：

问题一定是IE8以不同的“浏览器模式”显示“部署的站点”。

按 F12 以调出开发者工具以查看正在使用的模式。

在<head> 中添加这个可以解决问题：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

【讨论】：